Initial commit

src/pages/TemplatesPage.tsx

@@ -0,0 +1,44 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+} from "@fluentui/react-components";
+import { portalApi } from "../api/portalApi";
+import { DataState } from "../components/DataState";
+import { PageHeader } from "../components/PageHeader";
+
+export function TemplatesPage() {
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["templates"],
+    queryFn: ({ signal }) => portalApi.getTemplates(signal),
+  });
+
+  return (
+    <>
+      <PageHeader title="Templates" description="Vorlagen fuer Portal-Bereitstellungen." />
+      <DataState isLoading={isLoading} error={error} />
+      {data && (
+        <Table aria-label="Templates">
+          <TableHeader>
+              <TableRow>
+                <TableHeaderCell>Name</TableHeaderCell>
+                <TableHeaderCell>Id</TableHeaderCell>
+              </TableRow>
+          </TableHeader>
+          <TableBody>
+            {data.map((template) => (
+              <TableRow key={template.id}>
+                <TableCell>{template.name}</TableCell>
+                <TableCell>{template.id}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+    </>
+  );
+}