Scroll areastandard

import * as React from "react"import Image from "next/image"
import {  Example,  ExampleWrapper,} from "@/components/example"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}`)
const works = [  {    artist: "Ornella Binni",    art: "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%206'%3E%3Crect%20width='8'%20height='6'%20fill='%2394a3b8'/%3E%3C/svg%3E",  },  {    artist: "Tom Byrom",    art: "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%206'%3E%3Crect%20width='8'%20height='6'%20fill='%23a3a3a3'/%3E%3C/svg%3E",  },  {    artist: "Vladimir Malyav",    art: "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%206'%3E%3Crect%20width='8'%20height='6'%20fill='%2378716c'/%3E%3C/svg%3E",  },] as const
export default function ScrollAreaExample() {  return (    <ExampleWrapper>      <ScrollAreaVertical />      <ScrollAreaHorizontal />    </ExampleWrapper>  )}
function ScrollAreaVertical() {  return (    <Example title="Vertical">      <ScrollArea className="mx-auto h-72 w-48 rounded-md border style-luma:rounded-2xl style-rhea:rounded-2xl">        <div className="p-4">          <h4 className="mb-4 text-sm leading-none font-medium">Tags</h4>          {tags.map((tag) => (            <React.Fragment key={tag}>              <div className="text-sm">{tag}</div>              <Separator className="my-2" />            </React.Fragment>          ))}        </div>      </ScrollArea>    </Example>  )}
function ScrollAreaHorizontal() {  return (    <Example title="Horizontal">      <ScrollArea className="mx-auto w-full max-w-96 rounded-md border p-4 style-luma:rounded-2xl style-rhea:rounded-2xl">        <div className="flex gap-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>    </Example>  )}