Refactor root admin dashboard UI

2026-03-07 17:36:45 +01:00
parent ead75769ef
commit 8606f6e315
25 changed files with 2345 additions and 685 deletions
@@ -0,0 +1,85 @@
+import type { ReactNode } from "react";
+import Link from "next/link";
+import type { LucideIcon } from "lucide-react";
+import { ShieldCheck } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+type DashboardSidebarItem = {
+  label: string;
+  href: string;
+  icon: LucideIcon;
+  active?: boolean;
+  children?: DashboardSidebarItem[];
+};
+
+type DashboardSidebarProps = {
+  items: DashboardSidebarItem[];
+  footer?: ReactNode;
+};
+
+export function DashboardSidebar({ items, footer }: DashboardSidebarProps) {
+  function renderItem(item: DashboardSidebarItem, nested = false) {
+    const Icon = item.icon;
+
+    return (
+      <div key={item.href} className="space-y-1">
+        <Link
+          href={item.href}
+          className={cn(
+            "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
+            item.active
+              ? "bg-primary text-primary-foreground"
+              : "text-muted-foreground hover:bg-muted hover:text-foreground",
+            nested ? "ml-4" : undefined,
+          )}
+        >
+          <Icon className="h-4 w-4" />
+          <span>{item.label}</span>
+        </Link>
+        {item.children?.length ? item.children.map((child) => renderItem(child, true)) : null}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col bg-sidebar/40">
+      <div className="flex items-center gap-3 px-4 py-5">
+        <div className="rounded-xl bg-primary/10 p-2 text-primary">
+          <ShieldCheck className="h-5 w-5" />
+        </div>
+        <div className="min-w-0">
+          <p className="truncate text-sm font-semibold text-foreground">Mohs Admin</p>
+          <p className="truncate text-xs text-muted-foreground">Website owner workspace</p>
+        </div>
+      </div>
+
+      <div className="px-4">
+        <div className="rounded-xl border border-border/70 bg-background/80 p-4">
+          <div className="flex items-center justify-between gap-3">
+            <div>
+              <p className="text-sm font-medium text-foreground">Private panel</p>
+              <p className="mt-1 text-xs text-muted-foreground">Single owner access</p>
+            </div>
+            <Badge variant="outline">Private</Badge>
+          </div>
+        </div>
+      </div>
+
+      <Separator className="my-4" />
+
+      <div className="flex-1 space-y-6 overflow-y-auto px-4 pb-4">
+        <nav className="space-y-1">{items.map((item) => renderItem(item))}</nav>
+      </div>
+
+      {footer ? (
+        <>
+          <Separator />
+          <div className="space-y-2 p-4">{footer}</div>
+        </>
+      ) : null}
+    </div>
+  );
+}