Scroll Area

import { ScrollArea } from "@/components/ui/scroll-area"

export default function ScrollAreaHorizontal() {
  return (
    <ScrollArea className="max-w-96 rounded-md border" orientation="horizontal">
      <div className="flex w-max gap-4 p-4">
        {Array.from({ length: 20 }).map((_, i) => (
          <div
            key={i}
            className="flex h-20 w-32 shrink-0 items-center justify-center rounded-md bg-muted"
          >
            <span className="text-sm font-medium">Item {i + 1}</span>
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}

import { ScrollArea } from "@/components/ui/scroll-area"

export default function ScrollAreaBoth() {
  return (
    <ScrollArea orientation="both" className="h-80 max-w-80 rounded-md border">
      <p className="min-w-100 p-4">
        Just as suddenly as it had begun, the sensation stopped, leaving
        Alice feeling slightly disoriented. She looked around and realized that
        the room hadn't changed at all - it was she who had grown smaller,
        shrinking down to a fraction of her previous size. Alice felt herself
        growing larger and larger, filling up the entire room until she feared
        she might burst. The sensation was both thrilling and terrifying, as if
        she were expanding beyond the confines of her own body. She wondered if
        this was what it felt like to be a balloon, swelling with air until it
        could hold no more. Alice peered into the mirror, her reflection staring
        back at her with an air of mischief. She wondered what it would be like
        to step through the glass and into the world beyond, where everything
        seemed to be topsy-turvy and nothing was quite as it seemed. It's no use
        going back to yesterday, because I was a different person then,
        reflected Alice.
      </p>
    </ScrollArea>
  )
}