A long list, and a row that scrolls sideways

// apps/docs/examples/ui/scroll-area.tsx'use client';
import {  ScrollArea,  ScrollBar,} from '@workspace/active-ui/components/primitives/scroll-area';import {Separator} from '@workspace/active-ui/components/primitives/separator';
const EVENTS = Array.from(  {length: 40},  (_, index) => `Statement ${String(index + 1).padStart(2, '0')} sent`,);const YEARS = Array.from({length: 12}, (_, index) => 2015 + index);
/** * Content that scrolls inside a fixed box, with the package's scrollbar: a * long list vertically, and a row of tiles sideways with a horizontal * scrollbar added. */export default function ScrollAreaExample() {  return (    <div className="flex w-full max-w-sm flex-col gap-6">      <ScrollArea className="h-56 rounded-md border">        <div className="p-4">          <h4 className="mb-3 text-sm font-semibold">Activity</h4>          {EVENTS.map((event, index) => (            <div key={event}>              {index > 0 ? <Separator className="my-2" /> : null}              <p className="text-sm">{event}</p>            </div>          ))}        </div>      </ScrollArea>      <ScrollArea className="w-full rounded-md border whitespace-nowrap">        <div className="flex w-max gap-3 p-4">          {YEARS.map((year) => (            <div              key={year}              className="bg-muted flex size-20 shrink-0 items-center justify-center rounded-md text-sm font-medium"            >              {year}            </div>          ))}        </div>        <ScrollBar orientation="horizontal" />      </ScrollArea>    </div>  );}