Scroll area

"use client";

import { ScrollArea } from "@waveinno/ui";

export default function ScrollDemo() {
  const rows = Array.from({ length: 24 }, (_, i) => ({ plate: `DHA-${["GA", "KHA", "THA"][i % 3]} ${10 + i}-${(4321 + i * 37) % 9000}`, at: `${8 + Math.floor(i / 3)}:${String((i * 7) % 60).padStart(2, "0")}` }));
  return (
    <div className="grid gap-6 md:grid-cols-2">
      <div className="space-y-2">
        <p className="text-[12px] text-muted">vertical · fade at the edges with more</p>
        <ScrollArea fade className="h-64 rounded-card border border-border bg-raised" viewportClassName="p-2">
          {rows.map((r) => (
            <div key={r.plate} className="flex items-center justify-between rounded-[8px] px-2.5 py-2 text-[13px] hover:bg-hover">
              <span className="font-mono text-text">{r.plate}</span>
              <span className="num text-muted">{r.at}</span>
            </div>
          ))}
        </ScrollArea>
      </div>
      <div className="space-y-2">
        <p className="text-[12px] text-muted">horizontal</p>
        <ScrollArea orientation="horizontal" fade className="rounded-card border border-border bg-raised" viewportClassName="p-3">
          <div className="flex gap-3">
            {["Gulshan", "Banani", "Dhanmondi", "Uttara", "Mirpur", "Motijheel", "Bashundhara"].map((s) => (
              <div key={s} className="w-40 shrink-0 rounded-[12px] border border-border bg-surface p-3">
                <p className="text-[13px] font-semibold text-text">{s}</p>
                <p className="num mt-1 text-[12px] text-muted">{(s.length * 17) % 90}% full</p>
              </div>
            ))}
          </div>
        </ScrollArea>
      </div>
    </div>
  );
}