Horizontal Scroll Area Base Demo

1import Image from "next/image";
2import { ScrollArea, ScrollBar } from "@/registry/base-ui/scroll-area";
3
4export interface Artwork {
5  artist: string;
6  art: string;
7}
8
9const works: Artwork[] = [
10  {
11    artist: "Ornella Binni",
12    art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
13  },
14  {
15    artist: "Tom Byrom",
16    art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
17  },
18  {
19    artist: "Vladimir Malyavko",
20    art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
21  },
22];
23
24export function ScrollAreaHorizontalDemo() {
25  return (
26    <ScrollArea className="bg-background w-96 rounded-md border whitespace-nowrap">
27      <div className="flex w-max space-x-4 p-4">
28        {works.map((artwork) => (
29          <figure key={artwork.artist} className="shrink-0">
30            <div className="overflow-hidden rounded-md">
31              <Image
32                src={artwork.art}
33                alt={`Photo by ${artwork.artist}`}
34                className="aspect-[3/4] h-fit w-fit object-cover"
35                width={300}
36                height={400}
37              />
38            </div>
39            <figcaption className="text-muted-foreground pt-2 text-xs">
40              Photo by <span className="text-foreground font-semibold">{artwork.artist}</span>
41            </figcaption>
42          </figure>
43        ))}
44      </div>
45      <ScrollBar orientation="horizontal" />
46    </ScrollArea>
47  );
48}