Scroll area

"use client"

import * as React from "react"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"

const migrations = Array.from({ length: 24 }, (_, i) => `0${142 - i} ${["add_region_to_customers", "drop_partner_tier_old", "index_invoices_due_at", "add_flag_owner"][i % 4]}`)

export default function Example() {
  return (
    <ScrollArea className="h-64 w-72 rounded-lg border">
      <div className="p-3">
        <h4 className="mb-2 text-sm font-medium">Migrations on Staging</h4>
        {migrations.map((m) => (
          <React.Fragment key={m}>
            <p className="font-mono text-xs">{m}</p>
            <Separator className="my-2" />
          </React.Fragment>
        ))}
      </div>
    </ScrollArea>
  )
}