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>
  )
}