prime-ui-kit 0.21.1 → 0.21.3

package/src/layout/page/examples/router.tsx

@@ -1,4 +1,4 @@
-/** A section with sub-pages: the title is the section, each sub-page is a route of its own, the switch in the bar is their links and the body cross-fades between them; render it inside a router — `Page.Tools`, `asChild`. */
+/** A section with sub-pages: the title is the section, each sub-page is a route of its own with its own actions, the switch in the bar is their links on a line of their own and the body cross-fades between them; render it inside a router — `Page.Tools`, `asChild`. */
 import {
   Button,
   Card,
@@ -12,10 +12,13 @@ import {
 import { Link, Route, Routes, useLocation } from "react-router-dom";
 
 type Channel = { id: string; name: string; dialogs: number; reply: string };
+type Template = { id: string; name: string; uses: number };
 
+// The action of each sub-page: its own label, none on the statistics.
 const SUB_PAGES = [
-  { to: "/messengers/channels", label: "Каналы" },
-  { to: "/messengers/stats", label: "Статистика" },
+  { to: "/messengers/channels", label: "Каналы", action: "Подключить канал" },
+  { to: "/messengers/templates", label: "Шаблоны", action: "Новый шаблон" },
+  { to: "/messengers/stats", label: "Статистика", action: null },
 ];
 
 const CHANNELS: Channel[] = [
@@ -25,6 +28,23 @@ const CHANNELS: Channel[] = [
   { id: "avito", name: "Авито · Склад на Южной", dialogs: 59, reply: "25 мин" },
 ];
 
+const TEMPLATES: Template[] = [
+  { id: "greeting", name: "Приветствие в рабочее время", uses: 812 },
+  { id: "night", name: "Ответ ночью", uses: 264 },
+  { id: "delivery", name: "Сроки доставки", uses: 151 },
+];
+
+const TEMPLATE_COLUMNS: DataTableColumn<Template>[] = [
+  { id: "name", header: "Шаблон", cell: (row) => row.name },
+  {
+    id: "uses",
+    header: "Отправок",
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => row.uses,
+  },
+];
+
 const COLUMNS: DataTableColumn<Channel>[] = [
   { id: "name", header: "Канал", cell: (row) => row.name },
   {
@@ -46,7 +66,7 @@ const COLUMNS: DataTableColumn<Channel>[] = [
 export default function PageRouterExample() {
   const location = useLocation();
   // The first sub-page answers every other path of the section (here the preview's «/»).
-  const current = SUB_PAGES.find((page) => page.to === location.pathname)?.to ?? SUB_PAGES[0].to;
+  const current = SUB_PAGES.find((page) => page.to === location.pathname) ?? SUB_PAGES[0];
 
   return (
     <Page.Root>
@@ -56,7 +76,7 @@ export default function PageRouterExample() {
           <Page.Description>4 канала · 1 280 диалогов за октябрь</Page.Description>
         </Page.Heading>
         <Page.Tools aria-label="Мессенджеры">
-          <SegmentedControl.Root value={current} aria-label="Подразделы">
+          <SegmentedControl.Root value={current.to} aria-label="Подразделы">
             {SUB_PAGES.map((page) => (
               <SegmentedControl.Item key={page.to} value={page.to} asChild>
                 <Link to={page.to}>{page.label}</Link>
@@ -64,18 +84,20 @@ export default function PageRouterExample() {
             ))}
           </SegmentedControl.Root>
         </Page.Tools>
-        <Page.Actions>
-          <Button.Root>
-            <Button.Icon>
-              <Icon name="action.add" />
-            </Button.Icon>
-            Подключить канал
-          </Button.Root>
-        </Page.Actions>
+        {current.action ? (
+          <Page.Actions>
+            <Button.Root>
+              <Button.Icon>
+                <Icon name="action.add" />
+              </Button.Icon>
+              {current.action}
+            </Button.Root>
+          </Page.Actions>
+        ) : null}
       </Page.TopBar>
       <Page.Body>
         {/* `location` keeps the leaving sub-page on its own route while it fades out. */}
-        <Crossfade state={current}>
+        <Crossfade state={current.to}>
           <Routes location={location}>
             <Route
               path="/messengers/stats"
@@ -105,6 +127,17 @@ export default function PageRouterExample() {
                 </Page.Grid>
               }
             />
+            <Route
+              path="/messengers/templates"
+              element={
+                <DataTable
+                  columns={TEMPLATE_COLUMNS}
+                  rows={TEMPLATES}
+                  getRowKey={(row) => row.id}
+                  paging="none"
+                />
+              }
+            />
             <Route
               path="*"
               element={