セクションリストSectionListExperimental

import { Badge, ListCard, SectionList, type SectionListSection } from "@gunjo/ui";

const sections: SectionListSection[] = [
  {
    key: "june",
    title: "2026年6月締め",
    sublabel: "3社",
    meta: "¥562,000",
    content: (
      <div className="divide-y divide-border/70">
        <ListCard title="青山商事" description="広告素材 / 確認済み" meta="¥248,000" status={<Badge variant="secondary">確認済み</Badge>} className="rounded-none border-0 bg-background px-3 py-3 shadow-none" />
        <ListCard title="北浜デザイン" description="LP制作 / レビュー中" meta="¥186,000" status={<Badge variant="secondary">レビュー中</Badge>} className="rounded-none border-0 bg-background px-3 py-3 shadow-none" />
      </div>
    ),
    footer: <><span>締め小計</span><span>¥562,000</span></>,
  },
];

export function InvoiceSectionList() {
  return (
    <div className="w-full max-w-2xl rounded-lg border bg-card p-4">
      <SectionList sections={sections} label="締め別 請求一覧" />
    </div>
  );
}