マッチカードMatchCardExperimental
The two-sided pairing detail: a LEFT entity and a RIGHT entity side by side with a center match score, plus a factor-by-factor breakdown and actions. The heart of every matching / recommendation / deal-pairing / compare console — 求貨求車 (荷物×空車), M&A (売り手×買い手), 補助金 (自社×制度), candidate×job, buyer×seller. ENTITY-AGNOSTIC: left and right are arbitrary identity nodes (pair with CompanyCell / PersonCell / anything), and the two sides may be DIFFERENT kinds (a company and a program). Distinct from RelationshipRow, which hardcodes two PersonCells (person⟷person) and has no score/factor region. left + right + score? + factors[] ({label,value,tone?,detail?}) + actions. RSC-safe except opt-in handlers in the slots.
プレビュー
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| left / right | ReactNode | - | 左右のエンティティ（CompanyCell/PersonCell/任意）。人前提でない＝異なる種類でも可（会社と制度）。 |
| score | ReactNode | - | 中央の適合度/コネクタ（数値・Meter・Badge）。既定は ⟷。 |
| factors | MatchFactor[] | - | 要件/評価項目ごとの適合（{ label, value, tone?, detail? }）。 |
| factorsLabel | ReactNode | "適合の内訳" | 内訳の見出し。 |
| actions | ReactNode | - | 末尾アクション（打診/申請/NDA）。 |
| label | ReactNode | - | アクセシブル名。 |
| MatchFactor.label / value | ReactNode | - | 評価項目名・判定（◎○△×/Meter/テキスト）。 |
| MatchFactor.tone | "default" | "success" | "warning" | "destructive" | "muted" | "default" | 判定チップのトーン。 |
| MatchFactor.detail | ReactNode | - | 行下の詳細（自社 vs 制度 の値）。 |
Usage
import { MatchCard, CompanyCell, type MatchFactor } from "@gunjo/ui"
// Entity-agnostic — the two sides can be DIFFERENT kinds (a company × a subsidy program).
<MatchCard
left={<CompanyCell name="協栄精密工業" secondary="製造業・愛知" />}
right={<CompanyCell name="ものづくり補助金" secondary="設備投資・上限1,250万円" />}
score={<span className="text-lg font-bold">92%</span>}
factors={[
{ label: "対象事業者", value: "◎", tone: "success" },
{ label: "設備投資要件", value: "△", tone: "warning", detail: "見積追加が必要" },
]}
actions={<Button variant="primary" size="sm">申請を準備する</Button>}
/>