企業セルCompanyCellExperimental

企業名や制度名を、ロゴまたはイニシャルタイルと補足情報で表示する識別セルです。

プレビュー

UIXHEROデザインシステム・UIコンポーネント
ものづくり補助金設備投資・補助上限 1,250万円
さくらIT導入支援サービス業・東京都

状態とバリエーション

イニシャルタイル

logo を省略すると、name の先頭文字で四角い識別タイルを表示します。

ものづくり補助金設備投資・補助上限 1,250万円

logo と logoClassName を渡すと、ブランドの実ロゴを使った識別面にできます。

UIXHEROデザインシステム・UIコンポーネント

サイズ

一覧密度に合わせて sm / default / lg を選びます。

小規模事業者持続化補助金販路開拓・補助率 2/3
UIXHEROデザインシステム・UIコンポーネント
ものづくり補助金設備投資・補助上限 1,250万円
さくらIT導入支援サービス業・東京都

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
nameReactNode-主表示の企業名、組織名、制度名です。
secondaryReactNode-業種、所在地、制度区分などの補足行です。
logoReactNode-ロゴまたはアイコンです。省略時は name からイニシャルタイルを生成します。
size"sm" | "default" | "lg""default"セルの密度です。
logoClassNamestring-ロゴタイルの背景色や文字色を調整する追加 class です。

使い方

import { CompanyCell } from "@gunjo/ui";
import { IconCoin } from "@tabler/icons-react";

const uixheroLogoUrl = "https://www.uixhero.com/images/512grid_wh.svg";

export function CompanyDirectory() {
  return (
    <div className="grid gap-3 rounded-lg border bg-card p-4">
      <CompanyCell
        name="UIXHERO"
        secondary="デザインシステム・UIコンポーネント"
        logo={<img src={uixheroLogoUrl} alt="" className="h-6 w-6 object-contain" />}
        logoClassName="bg-foreground text-background"
      />
      <CompanyCell
        name="ものづくり補助金"
        secondary="設備投資・補助上限 1,250万円"
      />
      <CompanyCell
        name="さくらIT導入支援"
        secondary="サービス業・東京都"
        logo={<IconCoin className="h-5 w-5" />}
        logoClassName="bg-primary-subtle text-primary"
      />
    </div>
  );
}

使用コンポーネント

CompanyCell

関連コンポーネント

PersonCellMatchCardListCard