64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Brain,
|
|
Languages,
|
|
Palette,
|
|
Settings2,
|
|
Shield,
|
|
User,
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { Button } from "poyraz-ui/atoms";
|
|
|
|
export type SettingsNavigationLabels = {
|
|
ai: string;
|
|
appearance: string;
|
|
general: string;
|
|
language: string;
|
|
languages: string;
|
|
profile: string;
|
|
security: string;
|
|
};
|
|
|
|
const items = [
|
|
{ key: "general", href: "/settings/general", icon: Settings2 },
|
|
{ key: "appearance", href: "/settings/appearance", icon: Palette },
|
|
{ key: "profile", href: "/settings/profile", icon: User },
|
|
{ key: "security", href: "/settings/security", icon: Shield },
|
|
{ key: "ai", href: "/settings/ai", icon: Brain },
|
|
{ key: "language", href: "/settings/language", icon: Languages },
|
|
{ key: "languages", href: "/settings/languages", icon: Languages },
|
|
] as const;
|
|
|
|
export function SettingsNavigation({ labels }: { labels: SettingsNavigationLabels }) {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<nav
|
|
aria-label={labels.general}
|
|
className="tiny-scrollbar flex w-full shrink-0 gap-2 overflow-x-auto pb-2 md:sticky md:top-8 md:max-h-[calc(100vh-4rem)] md:w-60 md:self-start md:flex-col md:overflow-y-auto md:pb-0"
|
|
>
|
|
{items.map((item) => {
|
|
const Icon = item.icon;
|
|
const active = pathname === item.href || pathname.startsWith(`${item.href}/`);
|
|
return (
|
|
<Button
|
|
key={item.href}
|
|
asChild
|
|
effect="shine"
|
|
variant={active ? "default" : "secondary"}
|
|
className="h-auto shrink-0 justify-start gap-3 px-4 py-3 text-left"
|
|
>
|
|
<Link href={item.href} aria-current={active ? "page" : undefined}>
|
|
<Icon className="h-4 w-4" aria-hidden="true" />
|
|
{labels[item.key]}
|
|
</Link>
|
|
</Button>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
}
|