chore: import clean Agent Desk snapshot (6/7)

web/app/(support)/support/_components/community-frame.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import { type ReactNode } from "react"
+
+import { SupportHeader } from "@/app/(support)/support/_components/support-header"
+import { CommunityCategoryMenuContent, CommunityCategoryNav } from "@/app/(support)/support/_components/community-category-nav"
+import { useCommunityCategoryRoute } from "@/app/(support)/support/_components/support-community-route"
+import { useI18n } from "@/i18n/provider"
+import { cn } from "@/lib/utils"
+
+export function CommunityFrame({
+  active,
+  categoryRoute,
+  children,
+  toc,
+}: {
+  active?: number | "all"
+  categoryRoute: ReturnType<typeof useCommunityCategoryRoute>
+  children: ReactNode
+  toc?: ReactNode
+}) {
+  const t = useI18n()
+  const categoryNavigation = (
+    <CommunityCategoryMenuContent
+      categories={categoryRoute.categories}
+      active={active ?? categoryRoute.activeCategoryId}
+      loading={categoryRoute.categoriesLoading}
+      failed={categoryRoute.categoriesFailed}
+      onChange={categoryRoute.changeCategory}
+      onRetry={categoryRoute.loadCategories}
+    />
+  )
+
+  return (
+    <main className="min-h-svh bg-background text-foreground">
+      <SupportHeader
+        section="community"
+        mobileNavigation={{
+          title: t("supportPublic.posts.categoryNavigation"),
+          content: <div className="grid gap-0.5">{categoryNavigation}</div>,
+        }}
+      />
+      <div
+        className={cn(
+          "mx-auto grid max-w-[var(--support-docs-max-width)] xl:grid-cols-[var(--support-doc-nav-width)_minmax(0,1fr)]",
+          toc ? "2xl:grid-cols-[var(--support-doc-nav-wide-width)_minmax(0,1fr)_var(--support-doc-toc-width)]" : "2xl:grid-cols-[var(--support-doc-nav-wide-width)_minmax(0,1fr)]"
+        )}
+      >
+        <CommunityCategoryNav
+          categories={categoryRoute.categories}
+          active={active ?? categoryRoute.activeCategoryId}
+          loading={categoryRoute.categoriesLoading}
+          failed={categoryRoute.categoriesFailed}
+          onChange={categoryRoute.changeCategory}
+          onRetry={categoryRoute.loadCategories}
+        />
+        <section className="min-w-0 bg-background">
+          {children}
+        </section>
+        {toc ? <div className="hidden 2xl:block">{toc}</div> : null}
+      </div>
+    </main>
+  )
+}