Merge pull request 'init template view' (#149) from feat/templates-init into main
All checks were successful
build / test (push) Successful in 19s
All checks were successful
build / test (push) Successful in 19s
This commit is contained in:
commit
e1d2a98454
177
pkgs/ui/src/app/templates/[id]/page.tsx
Normal file
177
pkgs/ui/src/app/templates/[id]/page.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
62
pkgs/ui/src/app/templates/page.tsx
Normal file
62
pkgs/ui/src/app/templates/page.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue
Block a user