scroll-fade-effect-block-04

1import Image from "next/image";
2 
3import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
4import { cn } from "@/lib/utils";
5 
6interface Artwork {
7  artist: string;
8  art: string;
9}
10 
11const works: Artwork[] = [
12  {
13    artist: "Ornella Binni",
14    art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
15  },
16  {
17    artist: "Tom Byrom",
18    art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
19  },
20  {
21    artist: "Vladimir Malyavko",
22    art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
23  },
24];
25 
26export default function ScrollAreaHorizontalDemo() {
27  return (
28    <ScrollArea
29      className={cn(
30        "w-72 rounded-lg border whitespace-nowrap sm:w-96",
31        "**:data-[slot=scroll-area-viewport]:scroll-fade-effect-x"
32        // "**:data-[slot=scroll-area-viewport]:[--mask-offset-left:8px]",
33        // "**:data-[slot=scroll-area-viewport]:[--mask-offset-right:8px]"
34      )}
35    >
36      <div className="flex w-max gap-4 p-4">
37        {works.map((artwork) => (
38          <figure key={artwork.artist} className="shrink-0">
39            <Image
40              src={artwork.art}
41              alt={`Photo by ${artwork.artist}`}
42              className="aspect-3/4 h-fit w-fit rounded-sm object-cover"
43              width={300}
44              height={400}
45            />
46 
47            <figcaption className="pt-2 text-xs text-muted-foreground">
48              Photo by{" "}
49              <span className="font-semibold text-foreground">
50                {artwork.artist}
51              </span>
52            </figcaption>
53          </figure>
54        ))}
55      </div>
56      <ScrollBar orientation="horizontal" />
57    </ScrollArea>
58  );
59}