feat(portal): add client settings routes and translations

2026-07-21 12:49:55 +03:00
parent fcc6f2078a
commit 48f9d7bc87
15 changed files with 1720 additions and 68 deletions
@@ -0,0 +1,55 @@
+"use client";
+
+import { Languages, Palette, Shield, User } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Button } from "poyraz-ui/atoms";
+
+export type PortalSettingsNavigationLabels = {
+  appearance: string;
+  language: string;
+  profile: string;
+  security: string;
+};
+
+const items = [
+  { key: "language", href: "/portal/settings/language", icon: Languages },
+  { key: "appearance", href: "/portal/settings/appearance", icon: Palette },
+  { key: "profile", href: "/portal/settings/profile", icon: User },
+  { key: "security", href: "/portal/settings/security", icon: Shield },
+] as const;
+
+export function PortalSettingsNavigation({
+  labels,
+}: {
+  labels: PortalSettingsNavigationLabels;
+}) {
+  const pathname = usePathname();
+
+  return (
+    <nav
+      aria-label={labels.language}
+      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>
+  );
+}