Track HiveGrid Cloud planning reference

hivegrid-cloud/apps/web/app/modules/knowledgeBase/components/templates/PreviewKbsTemplate.tsx

@@ -0,0 +1,71 @@
+import TableSimple from "~/components/ui/tables/TableSimple";
+import { KnowledgeBasesTemplateDto } from "../../dtos/KnowledgeBasesTemplateDto";
+import { t as i18nT } from "i18next";
+
+export default function PreviewKbsTemplate({ template }: { template: KnowledgeBasesTemplateDto }) {
+  return (
+    <div className="space-y-2">
+      <h3 className="font-medium">{i18nT("knowledgeBase.templates.preview.headings.knowledgeBases")}</h3>
+      <TableSimple
+        items={template.knowledgeBases}
+        headers={[
+          { name: "slug", title: i18nT("knowledgeBase.templates.preview.columns.slug"), value: (i) => i.slug },
+          {
+            name: "title",
+            title: i18nT("knowledgeBase.templates.preview.columns.title"),
+            value: (i) => (
+              <div className="flex-col">
+                <div>{i.title}</div>
+                <div className="text-muted-foreground text-xs">{i.description}</div>
+              </div>
+            ),
+          },
+          { name: "enabled", title: i18nT("knowledgeBase.templates.preview.columns.enabled"), value: (i) => i.enabled },
+        ]}
+      />
+
+      <h3 className="font-medium">{i18nT("knowledgeBase.templates.preview.headings.categories")}</h3>
+      <TableSimple
+        items={template.categories}
+        headers={[
+          { name: "slug", title: i18nT("knowledgeBase.templates.preview.columns.slug"), value: (i) => i.slug },
+          {
+            name: "title",
+            title: i18nT("knowledgeBase.templates.preview.columns.title"),
+            value: (i) => (
+              <div className="flex-col">
+                <div>{i.title}</div>
+                <div className="text-muted-foreground text-xs">{i.description}</div>
+              </div>
+            ),
+          },
+          {
+            name: "sections",
+            title: i18nT("knowledgeBase.templates.preview.columns.sections"),
+            value: (i) => i.sections.map((s) => s.title).join(", "),
+          },
+          { name: "knowledgeBase", title: i18nT("knowledgeBase.templates.preview.columns.knowledgeBase"), value: (i) => i.knowledgeBaseSlug },
+        ]}
+      />
+
+      <h3 className="font-medium">{i18nT("knowledgeBase.templates.preview.headings.articles")}</h3>
+      <TableSimple
+        items={template.articles}
+        headers={[
+          { name: "slug", title: i18nT("knowledgeBase.templates.preview.columns.slug"), value: (i) => i.slug },
+          {
+            name: "title",
+            title: i18nT("knowledgeBase.templates.preview.columns.title"),
+            value: (i) => (
+              <div className="flex-col">
+                <div>{i.title}</div>
+                <div className="text-muted-foreground text-xs">{i.description}</div>
+              </div>
+            ),
+          },
+          { name: "knowledgeBase", title: i18nT("knowledgeBase.templates.preview.columns.knowledgeBase"), value: (i) => i.knowledgeBaseSlug },
+        ]}
+      />
+    </div>
+  );
+}