Nebelung
61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Users, Link, Palette, ArrowRightLeft } from "lucide-react";
|
|
import NextLink from "next/link";
|
|
|
|
import { usePathname } from "next/navigation";
|
|
|
|
export default function SettingsLayout({
|
|
children,
|
|
}: Readonly<{ children: React.ReactNode }>) {
|
|
const pathname = usePathname();
|
|
return (
|
|
<div className="flex">
|
|
<div className="flex w-1/4 flex-col gap-2 p-4 pl-8 pt-8">
|
|
<NextLink href="/settings/appearance/">
|
|
<Button
|
|
variant={
|
|
pathname?.includes("/settings/appearance") ? "secondary" : "ghost"
|
|
}
|
|
className="w-full items-center justify-start gap-2"
|
|
>
|
|
<Palette className="h-5 w-5" /> Appearance
|
|
</Button>
|
|
</NextLink>
|
|
<NextLink href="/settings/wisp/">
|
|
<Button
|
|
variant={
|
|
pathname?.includes("/settings/wisp/") ? "secondary" : "ghost"
|
|
}
|
|
className="w-full items-center justify-start gap-2"
|
|
>
|
|
<ArrowRightLeft className="h-5 w-5" /> Wisp
|
|
</Button>
|
|
</NextLink>
|
|
<NextLink href="/settings/credits/">
|
|
<Button
|
|
variant={
|
|
pathname?.includes("/settings/credits") ? "secondary" : "ghost"
|
|
}
|
|
className="w-full items-center justify-start gap-2"
|
|
>
|
|
<Users className="h-5 w-5" /> Credits
|
|
</Button>
|
|
</NextLink>
|
|
<NextLink href="/settings/links/">
|
|
<Button
|
|
variant={
|
|
pathname?.includes("/settings/links") ? "secondary" : "ghost"
|
|
}
|
|
className="w-full items-center justify-start gap-2"
|
|
>
|
|
<Link className="h-5 w-5" /> Social Links
|
|
</Button>
|
|
</NextLink>
|
|
</div>
|
|
<div className="w-3/4 px-12 py-8">{children}</div>
|
|
</div>
|
|
);
|
|
}
|