ScrollArea

import { ScrollArea } from '@caroainc/ui-components/client'

<ScrollArea className="h-[200px] w-[300px] rounded-md border p-4">
  <div className="space-y-4">
    {Array.from({ length: 20 }).map((_, i) => (
      <p key={i}>項目 {i + 1}</p>
    ))}
  </div>
</ScrollArea>

<ScrollArea className="h-[200px] w-[300px] rounded-md border">
  <div className="p-4">
    <h4 className="mb-4 text-sm font-medium">通知</h4>
    {notifications.map((notification) => (
      <div key={notification.id} className="flex items-center gap-2">
        <Avatar className="h-8 w-8">
          <AvatarFallback>{notification.initial}</AvatarFallback>
        </Avatar>
        <div>
          <p className="text-sm font-medium">{notification.title}</p>
          <p className="text-xs text-muted-foreground">{notification.time}</p>
        </div>
      </div>
    ))}
  </div>
</ScrollArea>

<ScrollArea className="w-[300px] whitespace-nowrap rounded-md border">
  <div className="flex space-x-4 p-4">
    {Array.from({ length: 10 }).map((_, i) => (
      <div key={i} className="w-[150px] shrink-0">
        カード {i + 1}
      </div>
    ))}
  </div>
</ScrollArea>