@godxjp/ui 19.1.0 → 19.3.1

package/docs/layout/topbar.tsx

@@ -0,0 +1,349 @@
+import { useState } from "react";
+import { AppShell, Flex, PageContainer, Sidebar, Topbar } from "@godxjp/ui/layout";
+import type { SidebarSectionProp } from "@godxjp/ui/layout";
+import {
+  Avatar,
+  AvatarFallback,
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@godxjp/ui/navigation";
+import {
+  Bell,
+  Building2,
+  ChevronDown,
+  FileText,
+  LayoutDashboard,
+  LogOut,
+  PanelLeftClose,
+  PanelLeftOpen,
+  Search,
+  Settings,
+  UserRound,
+  Users,
+} from "lucide-react";
+
+/**
+ * Topbar · a PURE SLOT bar. The shell only positions `start` / `center` / `end`; the CONSUMER
+ * composes every control. This demo builds the chrome the OLD baked Topbar used to force ·
+ * sidebar toggle, brand mark (Avatar), an entity switcher, a search trigger, a notifications button, a
+ * user menu · entirely from real primitives, so you can see there is no hidden template (and no
+ * dead dropdown: a control exists ONLY because it's placed here).
+ */
+const SECTIONS: SidebarSectionProp[] = [
+  {
+    label: "会計",
+    items: [
+      { id: "dashboard", label: "ダッシュボード", icon: LayoutDashboard },
+      { id: "journal", label: "仕訳", icon: FileText },
+    ],
+  },
+  { label: "管理", items: [{ id: "users", label: "ユーザー", icon: Users }] },
+];
+
+const ENTITIES = [
+  { id: "acme", name: "株式会社アクメ" },
+  { id: "globex", name: "グローバル商事株式会社" },
+  { id: "initech", name: "イニテック有限会社" },
+] as const;
+
+const TOPBAR_COPY = {
+  ja: {
+    screenTitle: "組織セキュリティと認証ポリシーの管理",
+    search: "ユーザー、組織、監査イベントを検索…",
+  },
+  en: {
+    screenTitle: "Organization security and authentication policy administration",
+    search: "Search users, organizations, and audit events…",
+  },
+  vi: {
+    screenTitle: "Quản trị chính sách bảo mật và xác thực của tổ chức",
+    search: "Tìm người dùng, tổ chức và sự kiện kiểm toán…",
+  },
+} as const;
+
+type DemoLocale = keyof typeof TOPBAR_COPY;
+
+export default function Demo() {
+  const [activeId, setActiveId] = useState("dashboard");
+  const [collapsed, setCollapsed] = useState(false);
+  const [activeEntity, setActiveEntity] = useState<(typeof ENTITIES)[number]>(ENTITIES[0]);
+  const [unread, setUnread] = useState(true);
+  const [searchOpenCount, setSearchOpenCount] = useState(0);
+  const [locale, setLocale] = useState<DemoLocale>("ja");
+  const topbarCopy = TOPBAR_COPY[locale];
+
+  // start cluster · sidebar toggle + brand mark (Avatar) + an entity switcher the consumer owns.
+  const start = (
+    <>
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        aria-label={collapsed ? "サイドバーを展開" : "サイドバーを折りたたむ"}
+        aria-pressed={collapsed}
+        onClick={() => setCollapsed((c) => !c)}
+      >
+        {collapsed ? <PanelLeftOpen /> : <PanelLeftClose />}
+      </Button>
+      {/* Decorative mark — hidden below sm so the budget goes to the two real controls. */}
+      <Avatar className="rounded-md">
+        <AvatarFallback className="bg-primary text-primary-foreground font-bold">C</AvatarFallback>
+      </Avatar>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          {/* Button ships `shrink-0`, and only the LAST child of the start slot gets the built-in
+              truncation contract — so a switcher sitting mid-slot has to be told it may shrink, or
+              it keeps its full width and the slot clips it while it stays focusable. `flex-1
+              min-w-11` below sm lets it take just the leftover room without ever dropping under
+              the 44px touch floor — plain `min-w-0` let flex hand it 20px, which is under the 24px
+              SC 2.5.8 minimum, trading one failure for another. `truncate` puts the ellipsis on
+              the label rather than letting it spill. */}
+          <Button variant="ghost" size="sm" className="min-w-11 flex-1 sm:min-w-0 sm:flex-none">
+            <span className="truncate">{activeEntity.name}</span>
+            <ChevronDown />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="w-64">
+          <DropdownMenuLabel>エンティティ切替</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {ENTITIES.map((e) => (
+            <DropdownMenuItem key={e.id} onSelect={() => setActiveEntity(e)}>
+              <Building2 className="size-4" />
+              {e.name}
+              {activeEntity.id === e.id ? (
+                <Badge variant="secondary" className="ms-auto text-xs">
+                  現在
+                </Badge>
+              ) : null}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Text data-demo-topbar-title="" title={topbarCopy.screenTitle} weight="medium">
+        {topbarCopy.screenTitle}
+      </Text>
+    </>
+  );
+
+  // center · a search trigger (opens YOUR command palette). No baked search box.
+  const center = (
+    <Button
+      variant="outline"
+      size="sm"
+      className="text-muted-foreground w-full max-w-sm justify-start"
+      onClick={() => setSearchOpenCount((n) => n + 1)}
+    >
+      <Search />
+      {topbarCopy.search}
+    </Button>
+  );
+
+  // end · notifications + user menu, both consumer-composed.
+  const end = (
+    <>
+      {/* The end slot is `flex: 0 0 auto` — whatever sits here is taken out of the start slot's
+          budget before it gets a say. At 320 this environment chip alone claimed 93 of the bar's
+          198px, squeezing start to 25px and clipping the entity switcher inside it. An ambient
+          status label is the first thing a compact bar drops, so it appears from sm up. */}
+      <Badge tone="warning" className="text-xs">
+        ステージング
+      </Badge>
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        aria-label="通知"
+        className="relative"
+        onClick={() => setUnread(false)}
+      >
+        <Bell />
+        {unread ? (
+          <span className="bg-destructive absolute end-1.5 top-1.5 size-1.5 rounded-full" />
+        ) : null}
+      </Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon-sm" aria-label="アカウントメニュー">
+            <Avatar className="size-7">
+              <AvatarFallback>佐藤</AvatarFallback>
+            </Avatar>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-56">
+          <DropdownMenuLabel>佐藤 花子</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <UserRound className="size-4" />
+            プロフィール
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Settings className="size-4" />
+            アカウント設定
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <LogOut className="size-4" />
+            ログアウト
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  );
+
+  const sidebar = (
+    <Sidebar
+      activeId={activeId}
+      collapsed={collapsed}
+      onSelect={setActiveId}
+      sections={SECTIONS}
+      product={{ name: "CoreBooks", role: activeEntity.name, color: "hsl(220 70% 50%)" }}
+      onProductClick={() => undefined}
+    />
+  );
+
+  return (
+    <AppShell
+      sidebar={sidebar}
+      topbar={<Topbar start={start} center={center} end={end} />}
+      sidebarCollapsed={collapsed}
+    >
+      <PageContainer
+        title="Topbar デモ"
+        subtitle="slot bar · start / center / end をすべて consumer が組み立てる（焼き込みなし）"
+        breadcrumb={[{ label: "ホーム", to: "/" }, { label: "Topbar デモ" }]}
+      >
+        <Flex direction="col" gap="lg">
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>現在の状態</CardTitle>
+              <CardDescription>
+                各コントロールは props ではなく slot
+                に置いた実コンポーネント。操作すると更新されます。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Flex direction="col" gap="sm" className="text-sm">
+                <Flex aria-label="Preview locale" gap="sm" wrap>
+                  {(["ja", "en", "vi"] as const).map((language) => (
+                    <Button
+                      key={language}
+                      size="sm"
+                      variant="outline"
+                      aria-pressed={locale === language}
+                      onClick={() => setLocale(language)}
+                    >
+                      {language.toUpperCase()}
+                    </Button>
+                  ))}
+                </Flex>
+                <Flex align="center" gap="md">
+                  <Building2 className="text-muted-foreground size-4" />
+                  <Text tone="muted">アクティブエンティティ</Text>
+                  <Badge variant="secondary">{activeEntity.name}</Badge>
+                </Flex>
+                <Flex align="center" gap="md">
+                  <Bell className="text-muted-foreground size-4" />
+                  <Text tone="muted">通知バッジ</Text>
+                  <Badge tone={unread ? "destructive" : "neutral"} icon={null}>
+                    {unread ? "未読あり" : "なし"}
+                  </Badge>
+                </Flex>
+                <Flex align="center" gap="md">
+                  <Search className="text-muted-foreground size-4" />
+                  <Text tone="muted">検索を開いた回数</Text>
+                  <Badge tone="info" icon={null}>
+                    {searchOpenCount}
+                  </Badge>
+                </Flex>
+              </Flex>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>Topbar は3つの slot だけ</CardTitle>
+              <CardDescription>
+                start / center / end。中身（ブランド・ナビ・検索・言語切替・ユーザーメニュー）は
+                すべて consumer が決める。アイコンのみ／ラベル付き／枠線あり等は各コンポーネントの
+                props であって、シェルが強制するものではない。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Flex direction="col" gap="sm" className="text-sm">
+                {[
+                  {
+                    prop: "start",
+                    desc: "サイドバートグル + ブランドマーク（Avatar）+ エンティティ切替（DropdownMenu）",
+                  },
+                  { prop: "center", desc: "検索トリガー（Button）。コマンドパレットを開く" },
+                  { prop: "end", desc: "通知ボタン + ユーザーメニュー（DropdownMenu）" },
+                  { prop: "children", desc: "3 slot を使わず完全カスタムにする場合の逃げ道" },
+                ].map(({ prop, desc }) => (
+                  <Flex key={prop} align="start" gap="sm">
+                    <Badge variant="secondary" className="shrink-0">
+                      {prop}
+                    </Badge>
+                    <Text tone="muted">{desc}</Text>
+                  </Flex>
+                ))}
+              </Flex>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>状態リセット</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Flex gap="sm" wrap>
+                <Button size="sm" variant="outline" onClick={() => setUnread(true)}>
+                  <Bell />
+                  通知をリセット
+                </Button>
+                <Button size="sm" variant="outline" onClick={() => setCollapsed(false)}>
+                  <PanelLeftOpen />
+                  サイドバーを展開
+                </Button>
+                <Button size="sm" variant="outline" onClick={() => setActiveEntity(ENTITIES[0])}>
+                  初期値に戻す
+                </Button>
+              </Flex>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>320px stress · 長いローカライズ内容</CardTitle>
+              <CardDescription>
+                1100px 以下では package-owned contract が center slot を隠し、start の最後の
+                ラベルを ellipsis で切り詰めて end utilities を保護する。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Card className="max-w-80 overflow-hidden">
+                <CardContent>
+                  <Topbar
+                    start={<Text weight="medium">株式会社とても長い組織名称</Text>}
+                    center={<Button variant="outline">すべての取引を検索</Button>}
+                    end={<Button variant="ghost">山田 太郎 システム管理者</Button>}
+                  />
+                </CardContent>
+              </Card>
+            </CardContent>
+          </Card>
+        </Flex>
+      </PageContainer>
+    </AppShell>
+  );
+}

package/docs/navigation/app-setting-picker.tsx

@@ -0,0 +1,142 @@
+import { AppProvider } from "@godxjp/ui/app";
+import {
+  Avatar,
+  AvatarFallback,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer, Topbar } from "@godxjp/ui/layout";
+import { AppSettingPicker } from "@godxjp/ui/navigation";
+
+/**
+ * AppSettingPicker — ONE provider-bound Select for any single AppProvider setting,
+ * chosen via `kind` (locale/timezone/date/time plus theme/brand/density/fontSize). It replaces the
+ * former Locale/Timezone/Date-format/Time-format pickers (4 components → 1). Mount under
+ * <AppProvider> and it reads/writes the matching context with NO value/onValueChange; pass
+ * those to control it instead. Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  return (
+    <AppProvider
+      defaultLocale="ja"
+      defaultTimezone="Asia/Tokyo"
+      defaultDateFormat="iso"
+      defaultTimeFormat="24h"
+      persist={false}
+    >
+      <PageContainer
+        title="AppSettingPicker"
+        subtitle="kind で 1 つの AppProvider 設定を読み書きする統合ピッカー"
+      >
+        <Flex direction="col" gap="lg">
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>kind で対象設定を選ぶ</CardTitle>
+              <CardDescription>
+                旧 Locale / Timezone / DateFormat / TimeFormat ピッカーを 1 コンポーネントに統合。
+                &lt;AppProvider&gt; 配下に置くと value / onValueChange
+                なしでコンテキストを読み書きする。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Flex direction="row" gap="md" wrap>
+                <Flex direction="col" gap="sm" className="min-w-40 flex-1">
+                  <Text weight="medium">表示言語</Text>
+                  {/* locale defaults to the icon-only switcher; a labeled settings-form row opts
+                      into the full trigger with an explicit appearance="labeled". */}
+                  <AppSettingPicker kind="locale" appearance="labeled" id="setting-locale" />
+                </Flex>
+                <Flex direction="col" gap="sm" className="min-w-56 flex-1">
+                  <Text weight="medium">タイムゾーン</Text>
+                  <AppSettingPicker kind="timezone" id="setting-timezone" />
+                </Flex>
+                <Flex direction="col" gap="sm" className="min-w-44 flex-1">
+                  <Text weight="medium">日付フォーマット</Text>
+                  <AppSettingPicker kind="dateFormat" id="setting-date-format" />
+                </Flex>
+                <Flex direction="col" gap="sm" className="min-w-44 flex-1">
+                  <Text weight="medium">時刻フォーマット</Text>
+                  <AppSettingPicker kind="timeFormat" id="setting-time-format" />
+                </Flex>
+                <Flex direction="col" gap="sm" className="min-w-36 flex-1">
+                  <Text weight="medium">テーマ</Text>
+                  <AppSettingPicker kind="theme" id="setting-theme" />
+                </Flex>
+                <Flex direction="col" gap="sm" className="min-w-44 flex-1">
+                  <Text weight="medium">ブランド</Text>
+                  <AppSettingPicker kind="brand" id="setting-brand" />
+                </Flex>
+                <Flex direction="col" gap="sm" className="min-w-40 flex-1">
+                  <Text weight="medium">密度</Text>
+                  <AppSettingPicker kind="density" id="setting-density" />
+                </Flex>
+                <Flex direction="col" gap="sm" className="min-w-36 flex-1">
+                  <Text weight="medium">文字サイズ</Text>
+                  <AppSettingPicker kind="fontSize" id="setting-font-size" />
+                </Flex>
+              </Flex>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>狭いコンテナと長いラベル</CardTitle>
+              <CardDescription>
+                320px 相当で長いタイムゾーン名の折返し・クリッピングを確認する。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Card className="max-w-80" lang="ja">
+                <CardContent>
+                  <AppSettingPicker kind="timezone" id="setting-timezone-narrow" />
+                </CardContent>
+              </Card>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>アイコンのみ（トップバー）</CardTitle>
+              <CardDescription>
+                appearance=&quot;icon&quot; は正方形トリガーとローカライズ済み accessible name
+                を保持し、選択肢はメニュー内で完全表示する。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Topbar
+                start={
+                  <Avatar className="rounded-md">
+                    <AvatarFallback>G</AvatarFallback>
+                  </Avatar>
+                }
+                end={
+                  <Flex direction="row" gap="sm" align="center">
+                    <AppSettingPicker kind="locale" appearance="inline" id="topbar-locale-inline" />
+                    <AppSettingPicker kind="locale" appearance="icon" id="topbar-locale-icon" />
+                  </Flex>
+                }
+              />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>無効化</CardTitle>
+              <CardDescription>disabled で操作を止める。</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Flex direction="col" gap="sm" className="max-w-56">
+                <Text weight="medium">タイムゾーン (disabled)</Text>
+                <AppSettingPicker kind="timezone" id="setting-timezone-disabled" disabled />
+              </Flex>
+            </CardContent>
+          </Card>
+        </Flex>
+      </PageContainer>
+    </AppProvider>
+  );
+}

package/docs/navigation/breadcrumb.tsx

@@ -0,0 +1,135 @@
+import { forwardRef } from "react";
+import type { AnchorHTMLAttributes } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  CodeBlock,
+} from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import { Breadcrumb } from "@godxjp/ui/layout";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Breadcrumb — a STANDALONE "where am I" trail. Place `<Breadcrumb items={[…]} />` anywhere
+ * (no shell required); it is NOT tied to AppShell or PageContainer. Pass one `items` array of
+ * `{ label, to? }`; the segment with no `to` is the current page. Import from @godxjp/ui/layout.
+ */
+const RouterLink = forwardRef<
+  HTMLAnchorElement,
+  AnchorHTMLAttributes<HTMLAnchorElement> & { to?: string }
+>(function RouterLink({ to, href, ...props }, ref) {
+  return <a ref={ref} href={to ?? href} data-router-link="" {...props} />;
+});
+
+export default function Demo() {
+  return (
+    <PageContainer
+      title="Breadcrumb"
+      subtitle="Standalone location trail · pass one items array, the last (no `to`) is the current page"
+    >
+      <Flex direction="col" gap="lg">
+        {/* 1 · IN FOCUS — the bare component + what every part does. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>基本 · これがコンポーネントそのもの</CardTitle>
+            <CardDescription>
+              `&lt;Breadcrumb items={"{[…]}"} /&gt;` を置くだけ。シェル不要。リンクのセグメント (to
+              あり) はクリックで戻れ、末尾 (to なし) は現在地として aria-current=&quot;page&quot; の
+              span に、区切り記号と nav/aria は自動付与。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Breadcrumb
+              ariaLabel="基本例のパンくず"
+              items={[
+                { label: "ホーム", to: "/" },
+                { label: "会計", to: "/accounting" },
+                { label: "請求書 INV-0042" },
+              ]}
+              aria-label="基本例のパンくずリスト"
+            />
+          </CardContent>
+        </Card>
+
+        {/* 2 · ONE KNOB — depth is just the array length. Stacked so the scaling is obvious. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>深さ · items を増やすだけ</CardTitle>
+            <CardDescription>
+              2 から 4 階層まで、変えるのは配列の長さだけ。区切りと折り返しは自動。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Breadcrumb
+                items={[{ label: "ホーム", to: "/" }, { label: "仕訳一覧" }]}
+                ariaLabel="2階層のパンくずリスト"
+              />
+              <Breadcrumb
+                ariaLabel="短い例のパンくず"
+                items={[{ label: "ホーム", to: "/" }, { label: "仕訳一覧" }]}
+              />
+              <Breadcrumb
+                ariaLabel="深い階層例のパンくず"
+                items={[
+                  { label: "ホーム", to: "/" },
+                  { label: "給与管理", to: "/payroll" },
+                  { label: "2024年5月分給与明細" },
+                ]}
+                aria-label="3階層のパンくずリスト"
+              />
+              <Breadcrumb
+                ariaLabel="長いラベル例のパンくず"
+                items={[
+                  { label: "ホーム", to: "/" },
+                  { label: "給与管理", to: "/payroll" },
+                  { label: "経理部", to: "/payroll/departments/accounting" },
+                  { label: "田中 太郎" },
+                ]}
+                aria-label="4階層のパンくずリスト"
+              />
+              <Breadcrumb
+                ariaLabel="ルーターアダプター例のパンくず"
+                linkComponent={RouterLink}
+                items={[{ label: "ホーム", to: "/" }, { label: "アダプター例" }]}
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* 3 · PLACEMENT — standalone, or the optional shell convenience. Reference, last. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>配置 · 単体 または シェルの任意プロップ</CardTitle>
+            <CardDescription>
+              単体でどこにでも置ける。任意で `PageContainer`/`AppShell` の `breadcrumb`
+              プロップに渡すと、ヘッダーの定位置に出る (シェルが強制するものではない)。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <Text as="p" size="xs" tone="muted">
+                単体 (どこでも):
+              </Text>
+              {/* tabIndex: the snippet scrolls sideways on a narrow viewport and holds no
+                  focusable content, so without its own tab stop a keyboard user cannot reach the
+                  clipped end of the line (WCAG 2.1.1). */}
+              <CodeBlock size="xs" wrap={false}>
+                {`<Breadcrumb items={[{ label: "ホーム", to: "/" }, { label: "現在ページ" }]} />`}
+              </CodeBlock>
+              <Text as="p" size="xs" tone="muted">
+                PageContainer / AppShell の breadcrumb プロップに (任意):
+              </Text>
+              <CodeBlock size="xs" wrap={false}>
+                {`<PageContainer title="仕訳詳細" breadcrumb={[{ label: "ホーム", to: "/" }, { label: "JE-0042" }]}>`}
+              </CodeBlock>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}