PageShell

ヘッダー帯・サマリー・本文からなるページ枠。

1 ページぶんの枠です。全幅のヘッダー帯、その中に置けるサマリーカードの行、そして本文の 3 段でできています。各パーツは薄い <div> なので、必要なものだけ使えます。

export const client = "only";

import {
  PageShell,
  PageShellHeader,
  PageShellHeading,
  PageShellTitle,
  PageShellDescription,
  PageShellHeaderEnd,
  PageShellMeta,
  PageShellActions,
  PageShellSummary,
  PageShellSummaryCard,
  PageShellContent,
} from "@squadbase/vantage/components";
import { Button } from "@squadbase/vantage/ui";
import { TrendingUp } from "lucide-react";

export default function Example() {
  return (
    <PageShell className="w-[44rem] rounded-xl border">
      <PageShellHeader className="py-8">
        <PageShellHeading>
          <PageShellTitle>売上ダッシュボード</PageShellTitle>
          <PageShellDescription>直近 6 か月の推移</PageShellDescription>
        </PageShellHeading>
        <PageShellHeaderEnd>
          <PageShellMeta>最終更新 10 分前</PageShellMeta>
          <PageShellActions>
            <Button variant="outline" size="sm">
              エクスポート
            </Button>
          </PageShellActions>
        </PageShellHeaderEnd>
        <PageShellSummary>
          <PageShellSummaryCard accent="accent">
            <TrendingUp />
            <div>関東が全体の 52% を占めています。</div>
          </PageShellSummaryCard>
          <PageShellSummaryCard accent="amber">
            <TrendingUp />
            <div>九州は 3 か月連続で減少しています。</div>
          </PageShellSummaryCard>
        </PageShellSummary>
      </PageShellHeader>
      <PageShellContent className="p-6 text-sm text-muted-foreground">
        ここに本文が入ります。
      </PageShellContent>
    </PageShell>
  );
}

import {
  PageShell,
  PageShellHeader,
  PageShellHeading,
  PageShellTitle,
  PageShellDescription,
  PageShellHeaderEnd,
  PageShellMeta,
  PageShellActions,
  PageShellSummary,
  PageShellSummaryCard,
  PageShellContent,
  pageShellSummaryCardVariants,
} from "@squadbase/vantage/components";

パーツ

パーツ	役割
`PageShell`	全体の縦積み
`PageShellHeader`	下線付きのヘッダー帯。左に見出し、右に `HeaderEnd` の 2 列
`PageShellHeading` / `PageShellTitle` / `PageShellDescription`	見出しブロック
`PageShellHeaderEnd`	右端の縦積み
`PageShellMeta`	「最終更新 10 分前」のような補足
`PageShellActions`	ボタン行
`PageShellSummary`	サマリーカードのグリッド（ヘッダー内で全幅）
`PageShellSummaryCard`	サマリー 1 枚。`accent` で色が付く
`PageShellContent`	本文

PageShellSummaryCard の accent は default / accent / amber / blue / emerald / red です。accent はテーマの --chart-1 を使うので、テーマトークンを変えると一緒に変わります。

レイアウトと組み合わせる

ページごとに書くより、_layout.tsx に置いて全ページで共有する方が実際的です（ルーティングを参照）。