feat: scaffold templates page

apps/web/src/components/SideNavigation.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { Button } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
+import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
 import {
   TbLayoutSidebarLeftCollapse,
@@ -15,10 +16,11 @@ import membersIconDark from "~/assets/members-dark.json";
 import membersIconLight from "~/assets/members-light.json";
 import settingsIconDark from "~/assets/settings-dark.json";
 import settingsIconLight from "~/assets/settings-light.json";
+import templatesIconDark from "~/assets/templates-dark.json";
+import templatesIconLight from "~/assets/templates-light.json";
 import ReactiveButton from "~/components/ReactiveButton";
 import UserMenu from "~/components/UserMenu";
 import WorkspaceMenu from "~/components/WorkspaceMenu";
-import { useTheme } from "next-themes";
 
 interface SideNavigationProps {
   user: UserType;
@@ -69,6 +71,11 @@ export default function SideNavigation({
       href: "/boards",
       icon: isDarkMode ? boardsIconDark : boardsIconLight,
     },
+    {
+      name: t`Templates`,
+      href: "/templates",
+      icon: isDarkMode ? templatesIconDark : templatesIconLight,
+    },
     {
       name: t`Members`,
       href: "/members",

apps/web/src/pages/templates/index.tsx

@@ -0,0 +1,17 @@
+import type { NextPageWithLayout } from "~/pages/_app";
+import { getDashboardLayout } from "~/components/Dashboard";
+import Popup from "~/components/Popup";
+import TemplatesView from "~/views/templates";
+
+const TemplatesPage: NextPageWithLayout = () => {
+  return (
+    <>
+      <TemplatesView />
+      <Popup />
+    </>
+  );
+};
+
+TemplatesPage.getLayout = (page) => getDashboardLayout(page);
+
+export default TemplatesPage;

apps/web/src/views/templates/index.tsx

@@ -0,0 +1,40 @@
+import Link from "next/link";
+import { t } from "@lingui/core/macro";
+
+import { PageHead } from "~/components/PageHead";
+import { useWorkspace } from "~/providers/workspace";
+import { api } from "~/utils/api";
+
+export default function TemplatesView() {
+  const { workspace } = useWorkspace();
+  const { data: templates, isLoading } = api.board.templates.useQuery(
+    { workspacePublicId: workspace.publicId ?? "" },
+    { enabled: !!workspace.publicId },
+  );
+
+  return (
+    <div className="m-auto h-full max-w-[1100px] p-6 px-5 md:px-28 md:py-12">
+      <PageHead title={t`Templates | ${workspace.name ?? "Workspace"}`} />
+      <div className="relative z-10 mb-8 flex w-full items-center justify-between">
+        <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
+          {t`Templates`}
+        </h1>
+      </div>
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3">
+        {isLoading && <div>{t`Loading templates...`}</div>}
+        {!isLoading && (templates?.length ?? 0) === 0 && (
+          <div className="text-sm text-light-900 dark:text-dark-900">{t`No templates yet`}</div>
+        )}
+        {templates?.map((tpl) => (
+          <Link
+            key={tpl.publicId}
+            href={`/boards/${workspace.slug}/${tpl.publicId}`}
+            className="rounded border border-light-300 p-3 text-sm hover:bg-light-100 dark:border-dark-300 dark:hover:bg-dark-100"
+          >
+            <div className="font-medium">{tpl.name}</div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}