import { Separator } from 'index'
import { ScrollArea } from './index'

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

export default () => (
  <ScrollArea tw="h-72 w-48 rounded-md border border-slate-100 dark:border-slate-700">
    <div tw="p-4">
      <h4 tw="mb-4 text-sm font-medium leading-none">Tags</h4>
      {tags.map((tag) => (
        <div key={tag}>
          <div tw="text-sm">{tag}</div>
          <Separator tw="my-[40]" />
        </div>
      ))}
    </div>
  </ScrollArea>
)
