{images.map((image, i) => (

${\`Image$

))} {/* Navigation Arrows */} {current > 0 && ( )} {current + 1 < images.length && ( )} {/* Control Pills */}

{[...images].map((_, idx) => ( ))}

); }; export Carousel; `,__src__:"src/registry/core/ui/carousel.tsx",__event__:"copy_usage_code",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"vesper",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'use client'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" { AnimatePresence, motion, MotionConfig } "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'framer-motion'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" { ChevronLeftIcon, ChevronRightIcon } "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'lucide-react'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Image "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'next/image'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" React, { useEffect, useState } "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'react'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"interface"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" CarouselProps"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" {}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" images "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ["})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'https://images.unsplash.com/photo-1554034483-04fda0d3507b?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8Z3JhZGllbnQlMjBiYWNrZ3JvdW5kfGVufDB8fDB8fHww'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'https://images.unsplash.com/photo-1628367282397-bf7cb7d6e4b3?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwxMzA5OTc1fHxlbnwwfHx8fHw%3D'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'https://images.unsplash.com/photo-1508615070457-7baeba4003ab?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MTZ8MTMwOTk3NXx8ZW58MHx8fHx8'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"];"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" Carousel"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" React"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"FC"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"CarouselProps"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"> "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" [current, setCurrent] "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" useState"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:");"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" [aspectRatio, setAspectRatio] "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" useState"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'16/9'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"); "}),(0,l.jsx)(n.span,{style:{color:"#8B8B8B94"},children:"// default aspect ratio"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" useEffect"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(() "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#8B8B8B94"},children:" // Get the dimensions of the first image to set the aspect ratio"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" img "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" new"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" window."}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"Image"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"();"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" img.src "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" images["}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"];"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" img."}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"onload"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" setAspectRatio"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"`${"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"img"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"width"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"}/${"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"img"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"height"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"}`"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:");"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" };"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }, []);"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" onPrevClick"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" if"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" (current "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" 0"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" setCurrent"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(current "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:");"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" };"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" onNextClick"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" if"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" (current "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" images.length "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" setCurrent"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(current "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:");"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" };"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" useEffect"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(() "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" handleKeyPress"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(e"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" KeyboardEvent"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" if"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" (e.key "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"==="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'ArrowLeft'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" &&"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" current "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" 0"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" setCurrent"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(current "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:");"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"else"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" if"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" (e.key "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"==="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'ArrowRight'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" &&"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" current "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" images.length "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" setCurrent"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(current "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:");"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" document."}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"addEventListener"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'keydown'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:", handleKeyPress);"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" document."}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"removeEventListener"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'keydown'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:", handleKeyPress);"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" };"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }, [current]);"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"main"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'px-10 animate-fade-in flex w-full flex-col items-center'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"MotionConfig"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" transition={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"{ type: "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'spring'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:", bounce: "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:", duration: "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"0.7"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}>"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"div"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'relative mx-auto w-full overflow-hidden'"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" style={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"{ aspectRatio: aspectRatio }"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"motion.div"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'flex h-full gap-4 w-full'"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" animate={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"{ x: "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"`calc(-${"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"current"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" *"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" 100"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"}% - ${"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"current"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"}rem)`"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"images."}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"map"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"((image, i) "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"div"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" key={"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"`image-${"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"i"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"}`"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'relative h-full w-full shrink-0'"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"Image"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" src={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"image"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" alt={"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"`Image ${"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"i"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" +"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"}`"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" fill"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'rounded-md object-contain'"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" priority={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"i "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"==="}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" 0"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" />"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ))"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#8B8B8B94"},children:"/* Navigation Arrows */"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"AnimatePresence"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" initial={"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}>"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"current "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" 0"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" &&"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"motion.button"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" initial={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"{ opacity: "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" animate={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"{ opacity: "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"0.8"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" exit={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"{ opacity: "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:", pointerEvents: "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'none'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" whileHover={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"{ opacity: "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"0.8"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'pointer-events absolute top-1/2 left-2 z-20 -mt-4 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-[#c2c2c3]/80 text-white backdrop-blur-xs transition-all sm:h-8 sm:w-8'"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" onClick={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"onPrevClick"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"ChevronLeftIcon"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'h-4 w-4 sm:h-6 sm:w-6'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" )"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"AnimatePresence"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" initial={"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}>"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"current "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" images.length "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"&&"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"motion.button"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" initial={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"{ opacity: "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" animate={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"{ opacity: "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"0.8"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" exit={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"{ opacity: "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:", pointerEvents: "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'none'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" whileHover={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"{ opacity: "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"0.8"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'pointer-events absolute top-1/2 right-2 z-20 -mt-4 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-[#c2c2c3]/80 text-white backdrop-blur-xs transition-all sm:h-8 sm:w-8'"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" onClick={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"onNextClick"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"ChevronRightIcon"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'h-4 w-4 sm:h-6 sm:w-6'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" )"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#8B8B8B94"},children:"/* Control Pills */"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'absolute right-0 bottom-2 left-0 flex justify-center sm:bottom-4'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'flex rounded-full bg-[#c2c2c3]/40 px-1.5 py-1.5 backdrop-blur-xs sm:px-2 sm:py-2'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"["}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"images]."}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"map"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"((_, idx) "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"button"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'cursor-pointer px-0.5 sm:px-1'"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" key={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"idx"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" onClick={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"() "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" setCurrent"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(idx)"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"div"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className={"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"`h-1.5 w-1.5 rounded-full transition-all sm:h-2 sm:w-2 ${"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" idx"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" ==="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" current"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" ?"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'bg-white'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" :"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'bg-gray-400/80'"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" }`"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ))"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"};"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Carousel;"})]})]})})})})]})}function g(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,Object.assign({},e,{children:(0,l.jsx)(d,e)})):d(e)}var b=g;function w(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return C(v);})(); ;return Component;

Carousel

Examples

Image Carousel

Resources