DashboardCard

ダッシュボードのタイル。プリセットとスケルトン付き。

ダッシュボードに並べるタイルです。素の Card より余白が詰まっており、 読み込み中用のスケルトンが同じ形で用意されています。よくある組み方は DashboardCardPreset 一つで済みます。

export const client = "only";

import {
  DashboardCardPreset,
  DashboardCardSkeleton,
  MetricValue,
  TrendIndicator,
} from "@squadbase/vantage/components";
import { Button } from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <div className="grid w-[40rem] grid-cols-3 gap-4">
      <DashboardCardPreset
        title="売上"
        description="今月"
        actions={<Button variant="ghost" size="xs">詳細</Button>}
        footer="前月比"
      >
        <MetricValue className="my-0">¥1,240,000</MetricValue>
        <TrendIndicator value={12.4} direction="up" />
      </DashboardCardPreset>

      <DashboardCardPreset title="新規顧客">
        <MetricValue className="my-0">128</MetricValue>
        <TrendIndicator value={3.1} direction="down" />
      </DashboardCardPreset>

      <DashboardCardSkeleton />
    </div>
  );
}

import {
  DashboardCard,
  DashboardCardHeader,
  DashboardCardTitle,
  DashboardCardDescription,
  DashboardCardAction,
  DashboardCardContent,
  DashboardCardFooter,
  DashboardCardSkeleton,
  DashboardCardPreset,
} from "@squadbase/vantage/components";

DashboardCardPreset

title / description / actions がすべて未指定ならヘッダーごと省かれます。footer も同様です。

自分で組む

配置を変えたいときは、パーツを直接使います。

<DashboardCard>
  <DashboardCardHeader>
    <div>
      <DashboardCardTitle>売上</DashboardCardTitle>
      <DashboardCardDescription>今月</DashboardCardDescription>
    </div>
    <DashboardCardAction>
      <Button variant="ghost" size="xs">詳細</Button>
    </DashboardCardAction>
  </DashboardCardHeader>
  <DashboardCardContent>…</DashboardCardContent>
  <DashboardCardFooter>前月比 +12.4%</DashboardCardFooter>
</DashboardCard>

読み込み中

DashboardCardSkeleton は同じ寸法の箱を描くので、データが届いても画面が跳ねません。

{isLoading ? <DashboardCardSkeleton /> : <DashboardCardPreset title="売上">…</DashboardCardPreset>}