Scroll shadow

import { ScrollShadow } from "@/components/ui/scroll-shadow"

const people = ["Amara Okafor", "Tomás Ferreira", "Kiara Murayama", "Rafael Abreu", "Priya Raman", "Inês Carvalho", "Lukas Weber", "Aoife Byrne", "Noor Haddad", "David Okonkwo", "Sofía Ortega", "Hannah Brooks"];

export function ScrollShadowDemo() {
  return (
    <div className="grid w-full max-w-sm gap-4">
      <ScrollShadow label="Reviewers" className="h-56 rounded-[12px] shadow-[inset_0_0_0_1px_var(--border)]">
        <ul className="grid">
          {people.map((name) => (
            <li key={name} className="border-b border-border px-4 py-2.5 text-sm last:border-0">{name}</li>
          ))}
        </ul>
      </ScrollShadow>
      <ScrollShadow orientation="horizontal" label="Filters" className="pb-1">
        <div className="flex w-max gap-2">
          {["All", "Open", "Waiting on customer", "Needs review", "Escalated", "Closed this week", "Archived"].map((chip) => (
            <span key={chip} className="rounded-full bg-muted px-3 py-1.5 text-xs font-medium whitespace-nowrap">{chip}</span>
          ))}
        </div>
      </ScrollShadow>
    </div>
  );
}