136 lines
3.6 KiB
TypeScript
136 lines
3.6 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import {
|
|
ArrowLeft,
|
|
FolderKanban,
|
|
ImageIcon,
|
|
LayoutDashboard,
|
|
LogOut,
|
|
PlusSquare,
|
|
ShieldAlert,
|
|
SwatchBook,
|
|
Tags,
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
import { DashboardLayout } from "@/components/dashboard/dashboard-layout";
|
|
import { MotionFade } from "@/components/motion-fade";
|
|
import { ThemeToggle } from "@/components/theme-toggle";
|
|
import { Button } from "@/components/ui/button";
|
|
import { getLocalizedPath } from "@/lib/locale";
|
|
import { getRootNavigation } from "@/lib/root-navigation";
|
|
|
|
type RootDashboardCopy = {
|
|
title: string;
|
|
subtitle: string;
|
|
overview: string;
|
|
maintenance: string;
|
|
uiKit: string;
|
|
portfolio: string;
|
|
media: string;
|
|
logout: string;
|
|
backToSite: string;
|
|
};
|
|
|
|
type RootDashboardShellProps = {
|
|
copy: RootDashboardCopy;
|
|
active: "overview" | "maintenance" | "ui-kit" | "portfolio" | "media";
|
|
portfolioChild?: "overview" | "projects" | "new-project" | "categories";
|
|
logoutAction: () => Promise<void>;
|
|
headerTitle: string;
|
|
headerDescription: string;
|
|
headerActions?: ReactNode;
|
|
toolbar?: ReactNode;
|
|
children: ReactNode;
|
|
};
|
|
|
|
export function RootDashboardShell({
|
|
copy,
|
|
active,
|
|
portfolioChild,
|
|
logoutAction,
|
|
headerTitle,
|
|
headerDescription,
|
|
headerActions,
|
|
toolbar,
|
|
children,
|
|
}: RootDashboardShellProps) {
|
|
const sidebarItems = getRootNavigation(copy, active, portfolioChild).filter(
|
|
(item) => item.href !== "/root/maintenance" && item.href !== "/root/ui-kit",
|
|
);
|
|
const headerIcon =
|
|
active === "overview"
|
|
? LayoutDashboard
|
|
: active === "maintenance"
|
|
? ShieldAlert
|
|
: active === "ui-kit"
|
|
? SwatchBook
|
|
: active === "media"
|
|
? ImageIcon
|
|
: portfolioChild === "categories"
|
|
? Tags
|
|
: portfolioChild === "new-project"
|
|
? PlusSquare
|
|
: FolderKanban;
|
|
const sharedActions = (
|
|
<>
|
|
<ThemeToggle ariaLabel="Theme wechseln" />
|
|
<Button asChild variant="outline" size="sm">
|
|
<Link href={getLocalizedPath("de")}>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
{copy.backToSite}
|
|
</Link>
|
|
</Button>
|
|
<form action={logoutAction}>
|
|
<Button type="submit" variant="ghost" size="sm" className="text-destructive hover:bg-destructive/10 hover:text-destructive">
|
|
<LogOut className="h-4 w-4" />
|
|
{copy.logout}
|
|
</Button>
|
|
</form>
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<DashboardLayout
|
|
title={headerTitle}
|
|
description={headerDescription}
|
|
icon={headerIcon}
|
|
items={sidebarItems}
|
|
sidebarFooter={
|
|
<>
|
|
<Button
|
|
asChild
|
|
variant={active === "maintenance" ? "default" : "outline"}
|
|
className="w-full justify-between"
|
|
>
|
|
<Link href="/root/maintenance">
|
|
{copy.maintenance}
|
|
<ShieldAlert className="h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
variant={active === "ui-kit" ? "default" : "outline"}
|
|
className="w-full justify-between"
|
|
>
|
|
<Link href="/root/ui-kit">
|
|
{copy.uiKit}
|
|
<SwatchBook className="h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
</>
|
|
}
|
|
headerActions={
|
|
<div className="flex flex-wrap items-center justify-end gap-2">
|
|
{headerActions}
|
|
{sharedActions}
|
|
</div>
|
|
}
|
|
>
|
|
<div className="space-y-6">
|
|
{toolbar ? <MotionFade delay={0.05}>{toolbar}</MotionFade> : null}
|
|
{children}
|
|
</div>
|
|
</DashboardLayout>
|
|
);
|
|
}
|