関係行RelationshipRowExperimental

Two PersonCells side by side with a connector (⟷ by default) and an optional relationship label: the 'person ⟷ person' unit. Models the pairings that define people-heavy domains — manager↔report (1on1), helper↔client (訪問介護), 利用者↔担当ケアマネ (ケアプラン), approver chains, mentor↔mentee. Each side is a full PersonCell (avatar + name + secondary/tertiary + status); a trailing slot holds a badge/chevron/actions. Presentational by default — let an interactive row (a wrapping link, DataTable onRowClick) own activation rather than nesting a button.

プレビュー

渡辺 文雄
利用者・要介護3
担当
田渕 美和子
介護支援専門員
交付済
山田 大輔
プロダクト本部
上司
伊藤 健太
EM
期限超過
佐藤 健一
訪問ヘルパー
訪問
小林 トヨ
利用者・88歳
本日2件

Props

表は横にスクロールできます
プロパティ初期値説明
fromPersonCellProps-左の人物(PersonCell の全プロップ: name/secondary/tertiary/avatar/presence/trailing…)。
toPersonCellProps-右の人物(同上)。
relationshipLabelReactNode-コネクタ下の小ラベル=関係の種類(担当 / 上司 / 訪問 など)。
connectorReactNode2人の間のグリフ/要素。既定は双方向矢印。
trailingReactNode-末尾スロット(ステータスバッジ / シェブロン / アクション)。
size"sm" | "md" | "lg"-両 PersonCell に伝播(from/to が各自 size で上書き可)。

Usage

import { RelationshipRow, Badge } from "@gunjo/ui"

// 利用者 ⟷ 担当ケアマネ — each side is a full PersonCell
<RelationshipRow
  from={{ name: "渡辺 文雄", secondary: "利用者・要介護3", avatar: { fallback: "渡" } }}
  relationshipLabel="担当"
  to={{ name: "田渕 美和子", secondary: "介護支援専門員" }}
  trailing={<Badge variant="success">交付済</Badge>}
/>

使用コンポーネント