import * as React from "react"
import Image from "next/image"
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"
const tags = Array.from({ length: 50 }).map(
(_, i, a) => `v1.2.0-beta.${a.length - i}`,
)
function ScrollAreaDemo() {
return (
<ScrollArea className="h-72 w-48 rounded-md border">
<div className="p-4">
<h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
{tags.map((tag) => (
<>
<div key={tag} className="text-sm">
{tag}
</div>
<Separator className="my-2" />
</>
))}
</div>
</ScrollArea>
)
}
export interface Artwork {
artist: string
art: string
}
export const works: Artwork[] = [
{
artist: "Ornella Binni",
art: "https://cdn.21st.dev/assets/mirror/c2/c2abbd88a17c2748e526a75db371c61b7c464e3ad96b7b8572db62be39ca6b74.jpg",
},
{
artist: "Tom Byrom",
art: "https://cdn.21st.dev/assets/mirror/c8/c8df3f768d669275e42653483fd1ae3b4a945c7ea69e408969de5044c1938eef.jpg",
},
{
artist: "Vladimir Malyavko",
art: "https://cdn.21st.dev/assets/mirror/33/338e359133ed59ac7e1b360e7df710c82d4d3ba5f55c42ba8f83dae6dcedf535.jpg",
},
]
function ScrollAreaHorizontalDemo() {
return (
<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
<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] h-fit w-fit object-cover"
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>
<ScrollBar orientation="horizontal" />
</ScrollArea>
)
}
export default {
ScrollAreaDemo,
ScrollAreaHorizontalDemo,
}
Part of shadcn/ui — browse the full library on 21st.dev.