This commit is contained in:
parent
475aad25fc
commit
c9d2cfcda5
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