Scroll Area

import { ScrollArea } from '@jamie/ui/scroll-area'
import { Separator } from '@jamie/ui/separator'
 
const meetings = [
  'Q4 Revenue Forecast',
  'Board Meeting Prep',
  'Monthly Close Debrief',
  'FP&A Sync — January',
  'Audit Committee Review',
  'Budget Planning 2026',
  'Investor Relations Call',
  'Due Diligence: Series C',
  'Revenue Ops Standup',
  'Quarterly Earnings Review',
  'Cash Flow Analysis',
  'Headcount Planning',
  'Expense Report Review',
  'Tax Strategy Meeting'
]
 
export function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-72 w-48 rounded-md border">
      <div className="p-4">
        <h4 className="mb-4 text-sm font-medium leading-none">Recent Meetings</h4>
        {meetings.map((meeting) => (
          <div key={meeting}>
            <div className="text-sm">{meeting}</div>
            <Separator className="my-2" />
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}

import { ScrollArea } from '@jamie/ui/scroll-area'
 
const speakers = [
  { name: 'Sasha K.', role: 'Finance' },
  { name: 'Charles M.', role: 'CFO' },
  { name: 'David R.', role: 'Revenue Ops' },
  { name: 'Jozo P.', role: 'FP&A' },
  { name: 'Raul G.', role: 'Audit' },
  { name: 'Marcel T.', role: 'Analytics' },
  { name: 'Alex N.', role: 'Product' }
]
 
export function ScrollAreaHorizontalDemo() {
  return (
    <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
      <div className="flex w-max gap-4 p-4">
        {speakers.map((speaker) => (
          <div
            key={speaker.name}
            className="flex w-32 shrink-0 flex-col items-center gap-1 rounded-md border p-4"
          >
            <div className="flex size-10 items-center justify-center rounded-full bg-muted text-xs font-medium">
              {speaker.name
                .split(' ')
                .map((n) => n[0])
                .join('')}
            </div>
            <span className="text-sm font-medium">{speaker.name}</span>
            <span className="text-xs text-muted-foreground">{speaker.role}</span>
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}