Simple Carousel

import SimpleMarquee from "@/components/ui/simple-carousel"

const MarqueeItem = ({ index }: { index: number }) => (
  <div className="bg-zinc-950 text-white w-24 h-24 sm:w-40 sm:h-40 md:w-48 md:h-48 mx-4 sm:mx-6 md:mx-8 relative rounded-xl shadow shadow-white">
    <span className="absolute top-2 left-3 md:left-4 text-base md:text-lg">
      ITEM {index.toString().padStart(2, "0")}
    </span>
    <span className="absolute bottom-2 left-3 md:left-4 text-sm md:text-base opacity-70">
      fancy
    </span>
  </div>
)

export default function SimpleCarouselDemo() {
  return (
    <div className="w-full h-full min-h-[400px] relative flex justify-center items-center bg-black text-white overflow-hidden">
      <SimpleMarquee
        className="w-full"
        baseVelocity={20}
        repeat={4}
        draggable
        grabCursor
        slowdownOnHover
        direction="left"
      >
        {Array.from({ length: 6 }, (_, i) => (
          <MarqueeItem key={i} index={i + 1} />
        ))}
      </SimpleMarquee>
    </div>
  )
}