A scrollable container with auto-hiding scrollbars, horizontal/vertical scroll progress indicators, and cross-axis wheel/touch scrolling for content overflow.
import * as React from "react";
import { ScrollAreaPro } from "@/components/ui/scroll-areapro";
export interface Artwork {
artist: string;
art: string;
}
export const works: Artwork[] = [
{
artist: "Lawrence Krowdeed",
art: "https://cdn.21st.dev/assets/mirror/22/22e4cb44508340a45351d791fa9b28e76e1b5cbfbb318b885431eb58966d6503.jpg",
},
{
artist: "烧不酥在上海 老的",
art: "https://cdn.21st.dev/assets/mirror/3c/3c500a310b26f6f7e18b16d2db6130b0cb200159c52237867fdfd4185ffc6dc5.jpg",
},
{
artist: "Hulki Okan Tabak",
art: "https://cdn.21st.dev/assets/mirror/3d/3d5816d821db3c5f56408ed1ff3880c0480219fb67f0b62ae38cf413fa4d8867.jpg",
},
{
artist: "Sam Baroudi",
art: "https://cdn.21st.dev/assets/mirror/63/6357535f519c961e17434db399efc8cad384d5b4b349869f9696901b314d4520.jpg",
},
];
export default function ScrollAreaProHorizontal() {
return (
<div className="flex items-center justify-center">
<ScrollAreaPro
className="w-96 rounded-md border"
crossDirectionalScroll
showProgress="horizontal"
>
<div className="flex w-max space-x-4 px-4 py-4">
{works.map((artwork) => (
<figure key={artwork.artist} className="shrink-0">
<div className="overflow-hidden rounded-md">
<img
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>
</div>
);
}