Scroll Area

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

export default function Particle() {
  return (
    <ScrollArea className="max-w-96 rounded-lg border">
      <div className="flex w-max gap-4 p-4">
        {Array.from({ length: 20 }).map((_, i) => (
          <div
            className="flex h-20 w-32 shrink-0 items-center justify-center rounded-md bg-muted"
            key={String(i)}
          >
            <span className="font-medium text-sm">Элемент {i + 1}</span>
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}

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

export default function Particle() {
  return (
    <ScrollArea className="max-w-96 rounded-lg border" scrollbarGutter>
      <div className="flex w-max gap-4 p-4">
        {Array.from({ length: 20 }).map((_, i) => (
          <div
            className="flex h-20 w-32 shrink-0 items-center justify-center rounded-md bg-muted"
            key={String(i)}
          >
            <span className="font-medium text-sm">Элемент {i + 1}</span>
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}

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

export default function Particle() {
  return (
    <ScrollArea className="h-80 max-w-80 rounded-lg border">
      <p className="min-w-100 p-4">
        Так же внезапно, как и началось, странное ощущение прекратилось, оставив
        Алису слегка растерянной. Она огляделась и поняла, что комната ничуть не
        изменилась — это она сама стала меньше, сжавшись до крошечной доли
        своего прежнего роста. Затем Алиса почувствовала, что растёт всё больше
        и больше, заполняя собой всю комнату, и испугалась, что вот-вот лопнет.
        Ощущение было одновременно восхитительным и пугающим, словно она
        раздувалась за пределы собственного тела. Алиса подумала, не так ли
        чувствует себя воздушный шар, который наполняют воздухом, пока он уже не
        в силах вместить больше. Она вгляделась в зеркало, и отражение смотрело
        на неё с лукавым выражением. Алиса задумалась, каково это — шагнуть
        сквозь стекло в потусторонний мир, где всё перевёрнуто вверх дном и
        ничто не таково, каким кажется. Нет смысла возвращаться во вчера, ведь
        тогда я была совсем другим человеком, размышляла Алиса.
      </p>
    </ScrollArea>
  );
}