Horizontal Scroll Gallery

"use client";

import { HorizontalScrollGallery } from "@/components/ui/horizontal-scroll-gallery";
import { useRef } from "react";

export default function HorizontalScrollGalleryDemo() {
  const containerRef = useRef<HTMLDivElement>(null);
  return (
    <div
      ref={containerRef}
      className="h-72 w-full overflow-y-auto rounded-lg border border-border bg-background"
    >
      <HorizontalScrollGallery scroller={containerRef} scrollHeight="400%">
        {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
          <div
            key={i}
            className="flex h-40 w-56 shrink-0 items-center justify-center rounded-lg border border-border bg-muted text-2xl font-bold text-foreground"
          >
            {i}
          </div>
        ))}
      </HorizontalScrollGallery>
    </div>
  );
}