IconBriefCard
IconBriefCardは、アイコンを含みうる情報をレイアウト表示するUIコンポーネント。
責務
いくつかの文字列(要素)と、アイコンURLをレイアウトして表示する。
コンポーネントをStackで並べることを想定している。
例
店舗情報を含んだ場合
https://scrapbox.io/files/64f09cbbc7a62c001b75e9d3.png
インターフェース
code:IconBriefCard.ts
type IconBriefCardProps = {
icon?: string;
title: string;
badges: IconBriefCardBadgeProps[];
time?: Date;
};
icon
必須ではない。
モデルを表すアイコンを渡すことができる。
ユーザーのアバター
店舗の画像
など
UIコンポーネントはドメイン知識を持たないので、この例にとらわれず、自由に使用できる。
title
必須。
モデルを表す最も基本的な文字列。
badges
必須。空配列でも良い。
cf. IconBriefCardBadge
IconBriefCardBadgePropsをIconBriefCardのインターフェース定義に利用することの是非
悩んだが、IconBriefCardBadgeはIconBriefCardの一部として考える。
拡張性を考えると、todo:IconBriefCardのインターフェース定義をIconBriefCardBadgeに依存させないようにするのが良い
利用のガイド
以下のようなケースで利用することが想定される。
アイコンを持つモデルを表示する
iconにアイコン情報を渡す。
iconは必須ではない。
アイコンを持たない例外が存在しても良い
利用例
RecentSearchQueryCard