Person card

"use client";
import { Avatar } from "@/components/ui/notchset/avatar";
import { PersonCard } from "@/components/ui/notchset/person-card";

const PEOPLE = [
  { name: "Maya Lindqvist", role: "Engineering lead", line: "Platform", open: 16, late: 2, time: "10:40" },
  { name: "Ruth Adeyemi", role: "Product designer", line: "Product", open: 7, late: 0, time: "09:40" },
  { name: "Priya Raman", role: "Data analyst", line: "Invited, hasn’t joined yet", open: 0, late: 0, time: "14:10" },
];

export default function PersonCardDemo() {
  return (
    <div className="flex flex-col gap-3">
      {PEOPLE.map((p) => (
        <div key={p.name} className="flex items-center gap-2.5 text-[length:var(--ns-text-small)] text-[var(--ns-ink-2)]">
          <PersonCard name={p.name} role={p.role} line={p.line} href="#" facts={[["Open", p.open], ["Overdue", p.late], ["Local time", p.time]]}>
            <Avatar name={p.name} size={24} />
            <span className="font-[number:var(--ns-weight-medium)] text-[var(--ns-ink)]">{p.name}</span>
          </PersonCard>
          · {p.role}
        </div>
      ))}
      <span className="text-[length:var(--ns-text-meta)] text-[var(--ns-ink-3)]">Hover or focus a name; a touch opens their page.</span>
    </div>
  );
}