ScrollArea Pro

import { ScrollAreaPro } from "@/components/ui/scroll-areapro"

<ScrollAreaPro
        className="w-96 rounded-md border whitespace-nowrap"
        crossDirectionalScroll
        showProgress="horizontal"
      >
        <div className="flex w-max space-x-4 p-4">
          {works.map((artwork) => (
            <figure key={artwork.artist} className="shrink-0">
              <div className="overflow-hidden rounded-md">
                <Image
                  src={artwork.art}
                  alt={`Photo by ${artwork.artist}`}
                  className="aspect-[3/4] object-cover grayscale"
                  width={300}
                  height={400}
                />
              </div>
              <figcaption className="pt-2 text-xs text-muted-foreground">
                Photo by{" "}
                <span className="font-semibold text-foreground">
                  {artwork.artist}
                </span>
              </figcaption>
            </figure>
          ))}
        </div>
      </ScrollAreaPro>