${\`Slide$

{games.map((game, index) => (

handleClick(index)} className={\`w-[80px] h-[80px] bg-slate-400 dark:bg-gray-700 flex items-center justify-center rounded-lg m-2 p-4 transition duration-300 ease-in-out cursor-pointer \${ currentIndex === index ? "border-4 border-blue-500 bounce-once" : "" }\`} > {game.title}

))}

{games[currentIndex].title}

{games[currentIndex].description}

Location

{games[currentIndex].location}

Country

{games[currentIndex].country}

); } `,__src__:"registry/default/example/animated-character-slider.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"use client"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useEffect"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useRef "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "react"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Game"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" id"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" number"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" title"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" image"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" description"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" location"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" country"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" games"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Game"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"[]"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" id"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 1,"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" title"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "Sunset Reflection"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" image"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "https://plus.unsplash.com/premium_photo-1674331214678-b32e99b1c7b9?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" description"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "A serene scene capturing the beauty of the sunset reflecting on the water."'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" location"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "Beachside Reflections"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" country"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "USA"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" id"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 2,"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" title"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "City Skyline at Dusk"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" image"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "https://plus.unsplash.com/premium_photo-1675019222050-f947bd824b39?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" description"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "An inspiring view of a modern city skyline illuminated by the setting sun."'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" location"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "Downtown Metropolis"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" country"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "Japan"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" id"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 3,"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" title"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "Mountain Peaks and Valleys"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" image"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "https://images.unsplash.com/photo-1726853546098-380e29da9e31?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" description"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "The awe-inspiring beauty of mountains with deep valleys between peaks."'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" location"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "Rocky Mountain Range"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" country"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "Canada"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" id"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 4,"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" title"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "Path Through Autumn Forest"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" image"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "https://images.unsplash.com/photo-1727053850604-ef02c46e34c2?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" description"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "A tranquil path winding through an autumnal forest."'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" location"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "Autumn Trail"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" country"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "Germany"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" id"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 5,"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" title"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "Bustling City Streets"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" image"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "https://images.unsplash.com/photo-1727949063400-fe75ba9f43da?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" description"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "Vibrant city streets filled with people, lights, and energy in the heart of the city."'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" location"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "Urban Downtown"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" country"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "France"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"];"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" AnimatedCharacterSlider"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"manualChange"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setManualChange"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"boolean"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">(false);"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" timeoutRef "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"NodeJS"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"Timeout"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">(null);"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"selectedImage"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setSelectedImage"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"games"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"[0]."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"image"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"currentIndex"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setCurrentIndex"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">(0);"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"progress"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setProgress"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"number"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">(0);"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"isMobile"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setIsMobile"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"boolean"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">(false);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" //"}),(0,n.jsx)(l.span,{style:{color:"#FFF4"},children:" Separate ref for img element"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" imgRef "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLImageElement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">(null);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" //"}),(0,n.jsx)(l.span,{style:{color:"#FFF4"},children:" Ref for list container (div)"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" listContainerRef "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLDivElement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">(null);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" intervalRef "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"NodeJS"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"Timeout"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" |"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" null"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">(null);"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"transitionClass"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setTransitionClass"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" resetInterval"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"intervalRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" clearInterval"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"intervalRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" intervalRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"current "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setInterval"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setTransitionClass"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"slide-left"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setCurrentIndex"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"prevIndex"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" prevIndex "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" games"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"length "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 1"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ?"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" :"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" prevIndex "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 1,"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" );"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setProgress"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(0);"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 5250);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useEffect"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" resetInterval"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"();"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"intervalRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" clearInterval"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"intervalRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" };"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" []);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useEffect"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"transitionClass"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" timeout "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setTimeout"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setTransitionClass"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'""'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 500);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" clearTimeout"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"timeout"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"currentIndex"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useEffect"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setSelectedImage"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"games"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"currentIndex"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"image"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"currentIndex"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useEffect"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" progressInterval "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setInterval"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setProgress"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"prevProgress"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" prevProgress "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 100"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ?"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 100"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" :"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" prevProgress "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 2,"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" );"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 100);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" clearInterval"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"progressInterval"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"currentIndex"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useEffect"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" (typeof"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" window "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"!=="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "undefined"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setIsMobile"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"window"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"innerWidth "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 1024);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handleResize"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setIsMobile"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"window"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"innerWidth "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 1024);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" window"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"addEventListener"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"resize"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" handleResize"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" window"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"removeEventListener"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"resize"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" handleResize"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" []);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" //"}),(0,n.jsx)(l.span,{style:{color:"#FFF4"},children:" Handle touch gesture sliding on mobile"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useEffect"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"isMobile "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" listContainerRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" container "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" listContainerRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" let"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" startX"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" number "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0;"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" let"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" moveX"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" number "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0;"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handleTouchStart"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"e"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" TouchEvent"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" startX "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" e"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"touches"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"[0]."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"clientX"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handleTouchMove"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"e"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" TouchEvent"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" moveX "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" e"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"touches"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"[0]."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"clientX"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handleTouchEnd"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" difference "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" startX "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" moveX"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"difference "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 50)"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setCurrentIndex"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"prevIndex"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" prevIndex "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" games"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"length "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 1"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ?"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" :"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" prevIndex "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"+"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 1,"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" );"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" else"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"difference "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" -50)"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setCurrentIndex"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"prevIndex"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" prevIndex "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"==="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ?"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" games"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"length "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 1"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" :"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" prevIndex "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 1,"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" resetInterval"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"();"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" container"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"addEventListener"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"touchstart"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" handleTouchStart"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" container"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"addEventListener"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"touchmove"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" handleTouchMove"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" container"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"addEventListener"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"touchend"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" handleTouchEnd"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" container"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"removeEventListener"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"touchstart"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" handleTouchStart"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" container"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"removeEventListener"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"touchmove"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" handleTouchMove"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" container"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"removeEventListener"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"touchend"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" handleTouchEnd"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"isMobile"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handleClick"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" number"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" direction "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" index "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" currentIndex "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "slide-left"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" :"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "slide-right"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setTransitionClass"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"direction"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setCurrentIndex"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setProgress"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(0);"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" resetInterval"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"();"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <>"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"style jsx"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">{"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"`"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" @keyframes fadeInScale {"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0% {"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" opacity: 0;"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" transform: scale(1.05);"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 100% {"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" opacity: 1;"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" transform: scale(1);"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" @keyframes bounceOnce {"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 0%,"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 100% {"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" transform: translateY(0);"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 50% {"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" transform: translateY(-8%);"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" .fade-scale {"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" animation: fadeInScale 0.6s ease-in-out;"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" .bounce-once {"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" animation: bounceOnce 0.4s ease-in-out;"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" `"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'" bg-background text-black dark:text-white flex items-center justify-center"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"w-full max-w-8xl p-4 lg:p-8 mx-auto flex flex-col lg:flex-row items-start"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"relative w-full lg:w-3/5 aspect-[16/9] rounded-lg overflow-hidden shadow-mde"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"w-full h-full"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"img"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"imgRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" //"}),(0,n.jsx)(l.span,{style:{color:"#FFF4"},children:" Correct ref type for the img element"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" src"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"selectedImage"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" alt"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"`Slide ${"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"currentIndex"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" + 1"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}`"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"`w-full h-full object-cover fade-scale transition-opacity duration-500 `"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"absolute bottom-0 w-full h-1.5 bg-gray-200 rounded-full mt-2 overflow-hidden"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"h-1.5 bg-blue-700 rounded-full transition-all duration-[1000ms] ease-out"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" style"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" width"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" `${"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"progress"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}%`"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" boxShadow"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "0 0 8px rgba(0, 122, 255, 0.5)"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" //"}),(0,n.jsx)(l.span,{style:{color:"#FFF4"},children:" Soft glow for a polished effect"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"mt-6 lg:mt-0 lg:ml-6 w-full lg:w-[40%]"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"flex flex-wrap"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"games"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"game"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" index"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" key"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"game"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"id"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" handleClick"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"`w-[80px] h-[80px] bg-slate-400 dark:bg-gray-700 flex items-center justify-center rounded-lg m-2 p-4 transition duration-300 ease-in-out cursor-pointer ${"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" currentIndex"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" === "}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"index"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ? "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"border-4 border-blue-500 bounce-once"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" : "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'""'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }`"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"img"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" src"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"game"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"image"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" alt"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"game"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"w-full h-full object-cover rounded-lg"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ))}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"mt-4 text-black dark:text-white"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"h2 className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"text-2xl font-semibold mb-2"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"games"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"currentIndex"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"p className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"text-sm text-gray-700 dark:text-gray-300"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"games"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"currentIndex"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"description"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"h3 className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"text-xl font-semibold mt-4"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Location"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"p className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"text-sm text-gray-700 dark:text-gray-300"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"games"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"currentIndex"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"location"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"h3 className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"text-xl font-semibold mt-4"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Country"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"p className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"text-sm text-gray-700 dark:text-gray-300"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"games"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"currentIndex"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"country"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})})]})}function d(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,{...e,children:(0,n.jsx)(t,{...e})}):t(e)}function b(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(w);})(); ;return Component;

Animated Character Slider