import { useState, useEffect } from 'react'; const Comp = ({ onLinkClick, title = 'Featured Content', titleFontF = 'var(--font-family-heading)', titleFontW = 'var(--font-weight-heading)', titleFontS = '', slide1Image = '', slide1Title = 'Slide 1 Title', slide1Description = 'This is the first slide description with engaging content.', slide1ButtonText = 'Learn More', slide1ButtonLink = '', slide1ButtonLinkType = 'page', slide1ButtonNewTab = false, slide1Quote = 'Timeless elegance', slide2Image = '', slide2Title = 'Slide 2 Title', slide2Description = 'This is the second slide description with compelling information.', slide2ButtonText = 'Discover', slide2ButtonLink = '', slide2ButtonLinkType = 'page', slide2ButtonNewTab = false, slide2Quote = 'Modern sophistication', slide3Image = '', slide3Title = 'Slide 3 Title', slide3Description = 'This is the third slide description with valuable details.', slide3ButtonText = 'Explore', slide3ButtonLink = '', slide3ButtonLinkType = 'page', slide3ButtonNewTab = false, slide3Quote = 'Refined perspective', autoPlay = true, autoPlaySpeed = 5000, showIndicators = true, showNavigation = true, slideHeight = 500, backgroundColor = '#fafaf7', slideBackgroundColor = '#ffffff', slideTitleFontF = 'var(--font-family-heading)', slideTitleFontW = 'var(--font-weight-heading)', slideTitleFontS = '', slideTitleColor = '#000000ff', slideDescriptionFontF = 'var(--font-family)', slideDescriptionFontW = 'var(--font-weight)', slideDescriptionFontS = '', slideDescriptionColor = '#7c7c7cff', buttonBackgroundColor = 'transparent', buttonTextColor = '#000000ff', buttonBorderColor = '#000000ff', buttonBorderWidth = 1, buttonFontF = 'var(--font-family-button)', buttonFontW = 'var(--font-weight-button)', buttonFontS = 'var(--font-size-button)', buttonBorderRadius = 0, slideBorderRadius = 0, imageBorderRadius = 0, navigationColor = '#000000ff', navigationBorderRadius = 0, indicatorColor = '#cccccc', indicatorActiveColor = '#000000ff', textAlign = 'center', showQuotes = true, quoteFontF = 'var(--font-family-heading)', quoteFontW = 'var(--font-weight-heading)', quoteFontS = '', quoteColor = '#ffffff', lineColor = '#ffffff', lineWidth = 40, lineThickness = 1, animationDuration = 1200, animationDelay = 200 }) => { const [currentSlide, setCurrentSlide] = useState(0); const [isPlaying, setIsPlaying] = useState(autoPlay); const [isMobile, setIsMobile] = useState(window.innerWidth < 768); const [touchStart, setTouchStart] = useState(0); const [touchEnd, setTouchEnd] = useState(0); const [isHovered, setIsHovered] = useState(false); const [isLoaded, setIsLoaded] = useState(false); // Construct slides array from individual props const slides = [ { image: slide1Image, title: slide1Title, description: slide1Description, buttonText: slide1ButtonText, buttonLink: slide1ButtonLink, buttonLinkType: slide1ButtonLinkType, buttonNewTab: slide1ButtonNewTab, quote: slide1Quote }, { image: slide2Image, title: slide2Title, description: slide2Description, buttonText: slide2ButtonText, buttonLink: slide2ButtonLink, buttonLinkType: slide2ButtonLinkType, buttonNewTab: slide2ButtonNewTab, quote: slide2Quote }, { image: slide3Image, title: slide3Title, description: slide3Description, buttonText: slide3ButtonText, buttonLink: slide3ButtonLink, buttonLinkType: slide3ButtonLinkType, buttonNewTab: slide3ButtonNewTab, quote: slide3Quote } ].filter(slide => slide.image); // Only include slides with images useEffect(() => { const handleResize = () => setIsMobile(window.innerWidth < 768); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); useEffect(() => { // Set loaded state after a small delay to trigger animations const timer = setTimeout(() => { setIsLoaded(true); }, 100); return () => clearTimeout(timer); }, []); useEffect(() => { let interval; if (isPlaying && slides.length > 1) { interval = setInterval(() => { setCurrentSlide(prev => (prev + 1) % slides.length); }, autoPlaySpeed); } return () => { if (interval) clearInterval(interval); }; }, [isPlaying, autoPlaySpeed, slides.length]); useEffect(() => { const handleKeyDown = (e) => { if (e.key === 'ArrowLeft') { e.preventDefault(); goToPrevious(); } else if (e.key === 'ArrowRight') { e.preventDefault(); goToNext(); } else if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); togglePlayPause(); } }; document.addEventListener('keydown', handleKeyDown); return () => document.removeEventListener('keydown', handleKeyDown); }, []); const goToNext = () => { setCurrentSlide(prev => (prev + 1) % slides.length); }; const goToPrevious = () => { setCurrentSlide(prev => (prev - 1 + slides.length) % slides.length); }; const goToSlide = (index) => { setCurrentSlide(index); }; const togglePlayPause = () => { setIsPlaying(prev => !prev); }; const handleTouchStart = (e) => { setTouchStart(e.targetTouches[0].clientX); }; const handleTouchMove = (e) => { setTouchEnd(e.targetTouches[0].clientX); }; const handleTouchEnd = () => { if (!touchStart || !touchEnd) return; const distance = touchStart - touchEnd; const isLeftSwipe = distance > 50; const isRightSwipe = distance < -50; if (isLeftSwipe) { goToNext(); } else if (isRightSwipe) { goToPrevious(); } }; const handleMouseEnter = () => { if (autoPlay) setIsPlaying(false); setIsHovered(true); }; const handleMouseLeave = () => { if (autoPlay) setIsPlaying(true); setIsHovered(false); }; if (!slides || slides.length === 0) { return (

No slides available. Please add slide images in the settings.

); } return (

{title && (

{title}

)}

{slides.map((slide, index) => { const isCurrentSlide = index === currentSlide; const slideDelay = animationDelay / 1000; return (

{slide.image && ( <>

)} {showQuotes && isHovered && slide.quote && (

{slide.quote}

)}

{slide.title && (

{slide.title}

)} {slide.description && (

{slide.description}

)} {slide.buttonText && ( )}

); })}

{showNavigation && slides.length > 1 && ( <> )} {autoPlay && slides.length > 1 && ( )} {showIndicators && slides.length > 1 && (

{slides.map((_, index) => (

goToSlide(index)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); goToSlide(index); } }} tabIndex="0" role="button" aria-label={`Go to slide ${index + 1}`} aria-current={currentSlide === index ? 'true' : 'false'} >

))}

)}

); };

404

Debug Information: