Scroll Area

<.scroll_area id="tags-demo" class="h-72 w-48 rounded-md border">
  <div class="p-4">
    <h4 class="mb-4 text-sm font-medium leading-none">Tags</h4>
    <div :for={tag <- @tags}>
      <div class="text-sm py-1"><%= tag %></div>
      <.separator />
    </div>
  </div>
</.scroll_area>

<.scroll_area id="horizontal-demo" scrollbars="horizontal" class="w-full rounded-md border">
  <div class="flex w-max space-x-4 p-4">
    <div
      :for={i <- 1..12}
      class="shrink-0 w-40 h-28 rounded-lg bg-muted flex items-center justify-center text-sm text-muted-foreground font-medium"
    >
      Card <%= i %>
    </div>
  </div>
</.scroll_area>

<.scroll_area id="both-demo" scrollbars="both" class="h-72 w-full max-w-md rounded-md border">
  <div class="w-[700px] p-4 space-y-4">
    <div :for={row <- 1..20} class="flex space-x-4">
      <div
        :for={col <- 1..6}
        class="shrink-0 w-24 h-12 rounded bg-muted flex items-center justify-center text-xs text-muted-foreground"
      >
        R<%= row %>C<%= col %>
      </div>
    </div>
  </div>
</.scroll_area>

<div class="text-center space-y-2">
  <.label>h-32</.label>
  <.scroll_area id="height-sm" class="h-32 w-40 rounded-md border">
    <div class="p-3 space-y-2">
      <div :for={i <- 1..20} class="text-xs text-muted-foreground">
        Item <%= i %>
      </div>
    </div>
  </.scroll_area>
</div>
<div class="text-center space-y-2">
  <.label>h-48</.label>
  <.scroll_area id="height-md" class="h-48 w-40 rounded-md border">
    <div class="p-3 space-y-2">
      <div :for={i <- 1..20} class="text-xs text-muted-foreground">
        Item <%= i %>
      </div>
    </div>
  </.scroll_area>
</div>
<div class="text-center space-y-2">
  <.label>h-64</.label>
  <.scroll_area id="height-lg" class="h-64 w-40 rounded-md border">
    <div class="p-3 space-y-2">
      <div :for={i <- 1..20} class="text-xs text-muted-foreground">
        Item <%= i %>
      </div>
    </div>
  </.scroll_area>
</div>