Scroll Area

'use client';

import { ScrollArea } from '@/components/ui/scroll-area';
import { Separator } from '@/components/ui/separator';

const tags = Array.from({ length: 50 }).map(
  (_, i, a) => `v1.2.0-beta.${a.length - i}`
);

export function ScrollAreaDefault() {
  return (
    <ScrollArea className='h-72 w-48 rounded-md border'>
      <div className='p-4'>
        <h4 className='mb-4 text-sm leading-none font-medium'>Tags</h4>
        {tags.map((tag, index) => (
          <div key={tag}>
            <div className='text-sm'>{tag}</div>
            {index < tags.length - 1 && <Separator className='my-2' />}
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}

'use client';

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

const items = Array.from({ length: 20 }).map((_, i) => ({
  id: i + 1,
  name: `Item ${i + 1}`,
}));

export function ScrollAreaHorizontal() {
  return (
    <ScrollArea orientation='horizontal' className='w-96 rounded-md border'>
      <div className='flex gap-4 p-4'>
        {items.map((item) => (
          <div
            key={item.id}
            className='flex h-20 w-32 shrink-0 items-center justify-center rounded-md border bg-muted'
          >
            {item.name}
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}