関係行RelationshipRowExperimental
2人の PersonCell を横並びにし、担当、上司、訪問などの関係を示す行です。
プレビュー
渡
渡辺 文雄
利用者・要介護3
担当
田
田渕 美和子
介護支援専門員
交付済
山
山田 大輔
プロダクト本部
上司
伊
伊藤 健太
EM
期限超過
佐
佐藤 健一
訪問ヘルパー
訪問
小
小林 トヨ
利用者・88歳
本日2件
状態とバリエーション
関係ペア
左右それぞれが完全な PersonCell なので、在席や末尾情報も持てます。
渡
渡辺 文雄
利用者・要介護3
担当
田
田渕 美和子
介護支援専門員
交付済
山
山田 大輔
プロダクト本部
上司
伊
伊藤 健太
EM
期限超過
佐
佐藤 健一
訪問ヘルパー
訪問
小
小林 トヨ
利用者・88歳
本日2件
小サイズ
密な表や管理画面では size="sm" で行高を抑えます。
渡
渡辺 文雄
利用者・要介護3
担当
田
田渕 美和子
介護支援専門員
交付済
片方向の関係
訪問や依頼のように方向性がある場合は connector を差し替えます。
佐
佐藤 健一
訪問ヘルパー
訪問
小
小林 トヨ
利用者・88歳
本日2件
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| from / to | PersonCellProps | - | 左右に表示する人物です。PersonCell の name/secondary/avatar/presence などを渡します。 |
| relationshipLabel | ReactNode | - | コネクタ下に出す関係ラベルです。 |
| connector | ReactNode | 双方向矢印 | 2人の間に置くグリフや要素です。 |
| trailing | ReactNode | - | ステータスバッジ、件数、操作などの末尾スロットです。 |
| size | "sm" | "md" | "lg" | - | 両側の PersonCell に渡すサイズです。from/to 側で個別に上書きできます。 |
使い方
import * as React from "react";
import { Badge, RelationshipRow, Separator } from "@gunjo/ui";
const pairs = [
{
from: { name: "渡辺 文雄", secondary: "利用者・要介護3", avatar: { fallback: "渡" }, avatarClassName: "bg-info-subtle text-info-subtle-foreground" },
relationshipLabel: "担当",
to: { name: "田渕 美和子", secondary: "介護支援専門員", avatar: { fallback: "田" }, presence: "online", presenceLabel: "online" },
trailing: <Badge variant="success">交付済</Badge>,
},
{
from: { name: "山田 大輔", secondary: "プロダクト本部", avatar: { fallback: "山" } },
relationshipLabel: "上司",
to: { name: "伊藤 健太", secondary: "EM", avatar: { fallback: "伊" } },
trailing: <Badge variant="warning">期限超過</Badge>,
},
{
from: { name: "佐藤 健一", secondary: "訪問ヘルパー", avatar: { fallback: "佐" }, presence: "online", presenceLabel: "online" },
relationshipLabel: "訪問",
to: { name: "小林 トヨ", secondary: "利用者・88歳", avatar: { fallback: "小" } },
trailing: <Badge variant="info">本日2件</Badge>,
},
];
export function CareRelationship() {
return (
<div className="flex w-full max-w-xl flex-col rounded-lg border border-transparent contrast-more:border-border forced-colors:border-[CanvasText] bg-card p-3">
{pairs.map((pair) => (
<React.Fragment key={pair.from.name + "-" + pair.to.name}>
{pair === pairs[0] ? null : <Separator />}
<div className="py-2">
<RelationshipRow from={pair.from} to={pair.to} relationshipLabel={pair.relationshipLabel} trailing={pair.trailing} />
</div>
</React.Fragment>
))}
</div>
);
}