Scroll Area

---
import { ScrollArea } from "@/components/starwind/scroll-area";
import { Separator } from "@/components/starwind/separator";

const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
---

<ScrollArea class="h-72 w-48 rounded-md border">
  <div class="p-4">
    <h4 class="mb-4 text-sm leading-none font-medium">Tags</h4>
    {
      tags.map((tag) => (
        <div>
          <div class="text-sm">{tag}</div>
          <Separator class="my-2" />
        </div>
      ))
    }
  </div>
</ScrollArea>

import { ScrollArea } from "@/components/starwind/scroll-area";
import { Separator } from "@/components/starwind/separator";

const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);

export function Example() {
  return (
    <>
      <ScrollArea className="h-72 w-48 rounded-md border">
        <div className="p-4">
          <h4 className="mb-4 text-sm leading-none font-medium">Tags</h4>
              {
                tags.map((tag) => (
            <div key={tag}>
              <div className="text-sm">{tag}</div>
              <Separator className="my-2" />
            </div>
                ))
}
        </div>
      </ScrollArea>
    </>
  );
}

---
import { ScrollArea, ScrollBar } from "@/components/starwind/scroll-area";
---

<ScrollArea class="w-full max-w-xl rounded-md border" viewportClass="whitespace-nowrap">
  <div class="flex w-max gap-2 p-4">
    <span class="bg-muted text-muted-foreground rounded-md px-3 py-1.5 text-sm">#Astro</span>
    <span class="bg-muted text-muted-foreground rounded-md px-3 py-1.5 text-sm">#Tailwind</span>
    <span class="bg-muted text-muted-foreground rounded-md px-3 py-1.5 text-sm">#TypeScript</span>
  </div>
  <ScrollBar slot="scrollbar" orientation="horizontal" />
</ScrollArea>

import { ScrollArea, ScrollBar } from "@/components/starwind/scroll-area";

export function Example() {
  return (
    <>
      <ScrollArea
className="w-full max-w-xl rounded-md border"
viewportClassName="whitespace-nowrap"
scrollbar={<ScrollBar orientation="horizontal" />}
>
        <div className="flex w-max gap-2 p-4">
          <span className="bg-muted text-muted-foreground rounded-md px-3 py-1.5 text-sm">#Astro</span>
          <span className="bg-muted text-muted-foreground rounded-md px-3 py-1.5 text-sm">#Tailwind</span>
          <span className="bg-muted text-muted-foreground rounded-md px-3 py-1.5 text-sm">#TypeScript</span>
        </div>
      </ScrollArea>
    </>
  );
}

---
import { ScrollArea } from "@/components/starwind/scroll-area";
import { Separator } from "@/components/starwind/separator";
---

const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);

<div class="w-full max-w-md" dir="rtl">
  <ScrollArea class="h-72 w-48 rounded-md border">
    <div class="p-4 text-right">
      <h4 class="mb-4 text-sm leading-none font-medium">العلامات</h4>
      {
        tags.map((tag) => (
          <div>
            <div class="text-sm">{tag}</div>
            <Separator class="my-2" />
          </div>
        ))
      }
    </div>
  </ScrollArea>
</div>

import { ScrollArea } from "@/components/starwind/scroll-area";
import { Separator } from "@/components/starwind/separator";

const tags = Array.from({ length: 50 }, (_, index) => `v1.2.0-beta.${50 - index}`);

export function Example() {
  return (
    <div className="w-full max-w-md" dir="rtl">
      <ScrollArea className="h-72 w-48 rounded-md border">
        <div className="p-4 text-right">
          <h4 className="mb-4 text-sm leading-none font-medium">العلامات</h4>
          {tags.map((tag) => (
            <div key={tag}>
              <div className="text-sm">{tag}</div>
              <Separator className="my-2" />
            </div>
          ))}
        </div>
      </ScrollArea>
    </div>
  );
}