init template view

pkgs/ui/src/app/templates/[id]/page.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import {
+  Attachment,
+  ChevronLeft,
+  Delete,
+  Edit,
+  Group,
+  Key,
+  MenuOpen,
+  NetworkCell,
+  Settings,
+  SettingsEthernet,
+  VisibilityOff,
+} from "@mui/icons-material";
+import {
+  Avatar,
+  Button,
+  Divider,
+  IconButton,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemSecondaryAction,
+  ListItemText,
+  ListSubheader,
+  Menu,
+  MenuItem,
+  Typography,
+} from "@mui/material";
+import { useState } from "react";
+
+export async function generateStaticParams() {
+  return [{ id: "1" }, { id: "2" }];
+}
+
+function getTemplate(params: { id: string }) {
+  console.log({ params });
+  // const res = await fetch(`https://.../posts/${params.id}`);
+  return {
+    short: `My Template ${params.id}`,
+  };
+}
+
+interface TemplateDetailProps {
+  params: { id: string };
+}
+export default function TemplateDetail({ params }: TemplateDetailProps) {
+  const details = getTemplate(params);
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <div className="flex w-full flex-col items-center justify-center">
+      <div className="w-full">
+        <Button
+          color="secondary"
+          LinkComponent={"a"}
+          href="/templates"
+          startIcon={<ChevronLeft />}
+        >
+          Back
+        </Button>
+      </div>
+      <div className="h-full w-full border border-solid border-slate-100 bg-slate-50 shadow-sm shadow-slate-400">
+        <div className="flex w-full flex-col items-center justify-center xl:p-2">
+          <Avatar className="m-1 h-20 w-20 bg-violet-600">
+            <Typography variant="h5">N</Typography>
+          </Avatar>
+          <Typography variant="h6" className="text-violet-600">
+            {details.short}
+          </Typography>
+          <div className="w-full">
+            <List
+              className="xl:px-4"
+              sx={{
+                ".MuiListSubheader-root": {
+                  px: 0,
+                },
+                ".MuiListItem-root": {
+                  px: 0,
+                },
+              }}
+            >
+              <ListSubheader>
+                <Typography variant="caption">Details</Typography>
+              </ListSubheader>
+              <ListItem>
+                <ListItemAvatar>
+                  <SettingsEthernet />
+                </ListItemAvatar>
+                <ListItemText primary="network" secondary="10.9.20.2" />
+              </ListItem>
+              <ListItem>
+                <ListItemAvatar>
+                  <Key />
+                </ListItemAvatar>
+                <ListItemText primary="secrets" secondary={"< ...hidden >"} />
+              </ListItem>
+              <ListItem>
+                <ListItemAvatar>
+                  <Group />
+                </ListItemAvatar>
+                <ListItemText primary="clans" secondary={"Boss clan.lol"} />
+              </ListItem>
+              <ListItem>
+                <ListItemAvatar>
+                  <Attachment />
+                </ListItemAvatar>
+                <ListItemText
+                  primary="Image"
+                  secondary={"/nix/store/12789-image-clan-lol"}
+                />
+                <ListItemSecondaryAction>
+                  <IconButton onClick={handleClick}>
+                    <Settings />
+                  </IconButton>
+                  <Menu
+                    MenuListProps={{
+                      className: "m-2",
+                    }}
+                    id="image-menu"
+                    aria-labelledby="image-menu"
+                    anchorEl={anchorEl}
+                    open={open}
+                    onClose={handleClose}
+                    anchorOrigin={{
+                      vertical: "top",
+                      horizontal: "left",
+                    }}
+                    transformOrigin={{
+                      vertical: "top",
+                      horizontal: "left",
+                    }}
+                  >
+                    <MenuItem>View</MenuItem>
+                    <MenuItem>Rebuild</MenuItem>
+                    <MenuItem>Delete</MenuItem>
+                  </Menu>
+                </ListItemSecondaryAction>
+              </ListItem>
+              <ListItem>
+                <ListItemAvatar>
+                  <Group />
+                </ListItemAvatar>
+                <ListItemText
+                  primary="nodes"
+                  secondary={"Dad's PC; Mum; Olaf; ... 3 more"}
+                />
+              </ListItem>
+            </List>
+          </div>
+        </div>
+        <div className="mt-2 flex w-full justify-evenly">
+          <Button
+            variant="text"
+            className="w-full text-black"
+            startIcon={<Edit />}
+          >
+            Edit
+          </Button>
+          <Button className="w-full text-red-700" startIcon={<Delete />}>
+            Delete
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

pkgs/ui/src/app/templates/page.tsx

@@ -0,0 +1,62 @@
+import { ChevronRight } from "@mui/icons-material";
+import {
+  Avatar,
+  Divider,
+  IconButton,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemButton,
+  ListItemSecondaryAction,
+  ListItemText,
+  Typography,
+} from "@mui/material";
+
+const templates = [
+  {
+    id: "1",
+    name: "Office Preset",
+    date: "12 May 2050",
+  },
+  {
+    id: "2",
+    name: "Work",
+    date: "30 Feb 2020",
+  },
+  {
+    id: "3",
+    name: "Family",
+    date: "1 Okt 2022",
+  },
+  {
+    id: "4",
+    name: "Standard",
+    date: "24 Jul 2021",
+  },
+];
+
+export default function ImageOverview() {
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <Typography variant="h4">Templates</Typography>
+      <List className="w-full gap-y-4">
+        {templates.map(({ id, name, date }, idx, all) => (
+          <>
+            <ListItem key={id}>
+              <ListItemButton LinkComponent={"a"} href={`/templates/${id}`}>
+                <ListItemAvatar>
+                  <Avatar className="bg-violet-600">{name.slice(0, 1)}</Avatar>
+                </ListItemAvatar>
+                <ListItemText primary={name} secondary={date} />
+                <ListItemSecondaryAction>
+                  <ChevronRight />
+                </ListItemSecondaryAction>
+              </ListItemButton>
+            </ListItem>
+            {idx < all.length - 1 && <Divider flexItem className="mx-10" />}
+          </>
+        ))}
+      </List>
+    </div>
+  );
+}