Scroll Area

import * as React from "react"import { ScrollArea } from "@/components/scroll-area"import { Separator } from "@/components/separator"const tags = Array.from({ length: 50 }).map(  (_, i, a) => `v1.2.0-beta.${a.length - i}`)export function ScrollAreaVertical() {  return (    <div className="flex flex-col gap-6">      <ScrollArea className="mx-auto h-72 w-48 overflow-hidden rounded-md border style-lyra:rounded-none style-maia:rounded-2xl style-luma:rounded-2xl style-sera:rounded-none 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>    </div>  )}

import Image from "next/image"import { ScrollArea, ScrollBar } from "@/components/scroll-area"const works = [  {    artist: "Ornella Binni",    art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",  },  {    artist: "Tom Byrom",    art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",  },  {    artist: "Vladimir Malyav",    art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",  },] as constexport function ScrollAreaHorizontal() {  return (    <div className="flex flex-col gap-6">      <ScrollArea className="mx-auto w-full max-w-96 overflow-hidden rounded-md border p-4 **:data-[slot=scroll-area-viewport]:rounded-md style-lyra:rounded-none style-lyra:**:data-[slot=scroll-area-viewport]:rounded-none style-maia:rounded-2xl style-luma:rounded-2xl style-sera:rounded-none style-sera:**:data-[slot=scroll-area-viewport]:rounded-none 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 style-lyra:rounded-none style-sera:rounded-none">                <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>    </div>  )}