Record details

"use client";
import * as React from "react";
import { FileText } from "lucide-react";
import { BuyingGroup, DetailSection, RecordDetails } from "@/components/ui/notchset/blocks/record-details";

export default function RecordDetailsDemo() {
  const [folded, setFolded] = React.useState<Record<string, boolean>>({ files: true });
  const fold = (k: string) => () => setFolded({ ...folded, [k]: !folded[k] });
  return (
    <div className="w-full max-w-sm">
      <RecordDetails
        rows={[
          { key: "src", label: "Source", value: "Inbound · webinar" },
          { key: "touch", label: "Last touch", value: "Today" },
          { key: "renew", label: "Renewal date", value: "Jan 31, 2027" },
        ]}
      >
        <DetailSection title="Buying group · 3" folded={!!folded.group} onToggle={fold("group")}>
          <BuyingGroup
            onOpen={() => {}}
            people={[
              { id: "1", name: "Kevin Ito", title: "VP Operations", role: "Champion", key: true },
              { id: "2", name: "Priya Shah", title: "CFO", role: "Economic buyer", key: true },
              { id: "3", name: "Tom Varga", title: "IT Security", role: "Evaluator" },
            ]}
          />
        </DetailSection>
        <DetailSection title="Files · 2" folded={!!folded.files} onToggle={fold("files")}>
          <ul className="m-0 flex list-none flex-col gap-1.5 p-0">
            {["order-form-v3.pdf", "security-questionnaire.xlsx"].map((f) => (
              <li key={f} className="flex items-center gap-2">
                <FileText className="size-3.5 text-[var(--ns-ink-3)]" aria-hidden />
                {f}
              </li>
            ))}
          </ul>
        </DetailSection>
      </RecordDetails>
    </div>
  );
}