84 lines
2.6 KiB
TypeScript
84 lines
2.6 KiB
TypeScript
import type { TWUILink } from "@/src/components/twui/elements/LinkList";
|
|
import LinkList from "@/src/components/twui/elements/LinkList";
|
|
import Stack from "@/src/components/twui/layout/Stack";
|
|
import { AppContext } from "@/src/pages/__root";
|
|
import { useContext } from "react";
|
|
import { LayoutDashboard, LogOut, Server, Settings, Users } from "lucide-react";
|
|
|
|
const sectionLabel = (label: string) => (
|
|
<div className="px-3 pt-6 pb-1.5 text-[11.5px] font-semibold uppercase tracking-[0.08em] text-foreground-light/40 dark:text-foreground-dark/40">
|
|
{label}
|
|
</div>
|
|
);
|
|
|
|
const linkClassName =
|
|
"px-3 py-2 w-full rounded-[5px] no-underline! border-b-0! " +
|
|
"text-[14px] font-medium text-foreground-light/70 dark:text-foreground-dark/70 " +
|
|
"hover:text-foreground-light! dark:hover:text-foreground-dark! " +
|
|
"hover:bg-foreground-light/5 dark:hover:bg-foreground-dark/5 transition-colors";
|
|
|
|
const iconClassName = "shrink-0 opacity-60";
|
|
|
|
export default function AdminAsideLinks() {
|
|
const { pageProps } = useContext(AppContext);
|
|
const { user, user_types } = pageProps || {};
|
|
|
|
if (!user?.logged_in_status) {
|
|
return null;
|
|
}
|
|
|
|
const links: TWUILink[] = [
|
|
{ component: sectionLabel("Overview") },
|
|
{
|
|
title: "Dashboard",
|
|
url: "/admin",
|
|
strict: true,
|
|
icon: (
|
|
<LayoutDashboard
|
|
size={16}
|
|
strokeWidth={2}
|
|
className={iconClassName}
|
|
/>
|
|
),
|
|
},
|
|
{ component: sectionLabel("WireGuard") },
|
|
{
|
|
title: "Clients",
|
|
url: "/admin/clients",
|
|
icon: (
|
|
<Users size={16} strokeWidth={2} className={iconClassName} />
|
|
),
|
|
},
|
|
{
|
|
title: "Host",
|
|
url: "/admin/host",
|
|
icon: <Server size={16} strokeWidth={2} className={iconClassName} />,
|
|
},
|
|
{ component: sectionLabel("Account") },
|
|
{
|
|
title: "Settings",
|
|
url: "/admin/settings",
|
|
icon: (
|
|
<Settings size={16} strokeWidth={2} className={iconClassName} />
|
|
),
|
|
},
|
|
{
|
|
title: "Logout",
|
|
url: "/auth/logout",
|
|
icon: (
|
|
<LogOut size={16} strokeWidth={2} className={iconClassName} />
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<Stack className="w-full items-stretch">
|
|
<LinkList
|
|
links={links}
|
|
className="gap-0.5 flex-col items-start pb-6"
|
|
linkProps={{ className: linkClassName }}
|
|
/>
|
|
</Stack>
|
|
);
|
|
}
|