Scroll Area

import { ScrollArea } from "@araf-ds/core"

export default function Example() {
  return (
    <ScrollArea className="h-64 w-56 rounded-md border">
      <div className="p-3">
        {components.map(name => (
          <div key={name} className="py-2 text-sm border-b last:border-0">
            {name}
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}

<ScrollArea className="h-40 w-56 rounded-md border">
  <div className="p-3 space-y-1">
    {users.map(user => (
      <div key={user.id} className="flex items-center gap-2 py-1.5">
        <Avatar size="sm" src={user.avatar} fallback={user.initials} />
        <span className="text-sm">{user.name}</span>
      </div>
    ))}
  </div>
</ScrollArea>

<ScrollArea className="w-72 whitespace-nowrap rounded-md border">
  <div className="flex gap-3 p-3">
    {artworks.map(art => (
      <figure key={art.id} className="shrink-0">
        <div className="overflow-hidden rounded-md">
          <img src={art.src} alt={art.title} className="h-32 w-32 object-cover" />
        </div>
        <figcaption className="pt-1 text-xs text-muted-foreground">
          {art.title}
        </figcaption>
      </figure>
    ))}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

// Always visible scrollbar
<ScrollArea type="always" className="h-48 rounded-md border">
  <div className="p-3">{content}</div>
</ScrollArea>

// Scrollbar only on hover
<ScrollArea type="hover" className="h-48 rounded-md border">
  <div className="p-3">{content}</div>
</ScrollArea>

// Scrollbar only while scrolling (default)
<ScrollArea type="scroll" className="h-48 rounded-md border">
  <div className="p-3">{content}</div>
</ScrollArea>