人物セルPersonCellBeta
人物のアバター、名前、所属、補足、在席状態、末尾情報を1行で表示する識別セルです。
プレビュー
佐
佐藤 美咲
プロダクト本部 / シニアUXデザイナー
正社員・東京本社
在籍
高
高橋 健一
デザインマネージャー
大阪支社
休職中
山
山田 涼介
人事 HRBP
契約更新確認中
更新待ち
状態とバリエーション
在席状態つき
presence は Avatar のドットとして表示し、presenceLabel で意味を伝えます。
佐
佐藤 美咲
プロダクト本部 / シニアUXデザイナー
正社員・東京本社
在籍
高
高橋 健一
デザインマネージャー
大阪支社
休職中
山
山田 涼介
人事 HRBP
契約更新確認中
更新待ち
サイズ
sm/md/lg を一覧密度に合わせて使い分けます。
中
中野 葵
エンジニアリング本部
中
中野 葵
エンジニアリング本部
中
中野 葵
エンジニアリング本部
最小構成
画像がない場合でも fallback と副行で識別できます。
小
小林 トヨ
利用者 / 88歳
インタラクティブ
onActivate（または href）でセル全体を activation target に。ルートが <button>/<a> になり、chevron が affordance、クリックと Enter/Space で起動します。行に別アクションも要る場合は使わず、行レベルで activation してください。
選択中: —
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| name | ReactNode | - | 主行です。文字列なら avatar fallback の頭文字を自動導出します。 |
| secondary | ReactNode | - | 役職、部署、メールなどの副行です。 |
| tertiary | ReactNode | - | 雇用形態や勤務地などの3行目です。 |
| avatar | { src?: string; alt?: string; fallback?: ReactNode } | - | 画像とfallbackです。src がない場合は fallback または氏名頭文字を表示します。 |
| presence / presenceLabel | Avatar presence | - | Avatar に渡す在席状態と読み上げラベルです。 |
| size | "sm" | "md" | "lg" | "md" | アバターと文字のスケールです。 |
| trailing | ReactNode | - | ステータスバッジ、件数、操作などの末尾スロットです。 |
| href / onActivate | string / () => void | - | セル全体を activation target にします。href は <a>、onActivate は <button> としてルート描画。未指定なら chevron を affordance に自動表示。ルート自体が interactive なので trailing は非インタラクティブ限定（ネストしない）。行に別アクションも要る場合は presentational のまま行レベルで activation する。(#341) |
| avatarClassName | string | - | fallback avatar の背景色などを調整します。 |
使い方
import { Badge, PersonCell } from "@gunjo/ui";
const people = [
{
name: "佐藤 美咲",
secondary: "プロダクト本部 / シニアUXデザイナー",
tertiary: "正社員・東京本社",
avatar: { src: "https://i.pravatar.cc/80?img=47" },
presence: "online",
trailing: <Badge variant="success">在籍</Badge>,
},
{
name: "高橋 健一",
secondary: "デザインマネージャー",
tertiary: "大阪支社",
avatar: { fallback: "高" },
avatarClassName: "bg-info-subtle text-info-subtle-foreground",
presence: "away",
trailing: <Badge variant="warning">休職中</Badge>,
},
{
name: "山田 涼介",
secondary: "人事 HRBP",
tertiary: "契約更新確認中",
avatar: { fallback: "山" },
avatarClassName: "bg-warning-subtle text-warning-subtle-foreground",
trailing: <Badge variant="outline">更新待ち</Badge>,
},
];
export function DirectoryRows() {
return (
<div className="flex w-full max-w-md flex-col divide-y rounded-lg border bg-card p-3">
{people.map((person) => (
<div key={person.name} className="py-2.5">
<PersonCell {...person} presenceLabel={person.presence} />
</div>
))}
</div>
);
}