Integrated a from ai generated dashboard

2026-01-27 13:31:35 +01:00
parent 0a78d88465
commit 061e59925c
7 changed files with 445 additions and 19 deletions
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -0,0 +1,62 @@
+import { Building2, Calendar, FileText, LayoutDashboard, LogOut, Music, Settings, Users } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import React from "react";
+
+const navItems = [
+  { icon: LayoutDashboard, label: "Overview", path: "/" },
+  { icon: Users, label: "People", path: "#people" },
+  { icon: Calendar, label: "Worship & Events", path: "#events" },
+  { icon: Music, label: "Music & Media", path: "#music" },
+  { icon: FileText, label: "Changes & Logs", path: "#logs" },
+  { icon: Settings, label: "Settings", path: "#settings" },
+];
+
+const Sidebar: React.FC = () => {
+  const pathName = usePathname();
+
+  return (
+    <aside
+      data-cmp="Sidebar"
+      className="hidden md:flex flex-col w-64 h-screen bg-card border-r border-border fixed left-0 top-0 z-30"
+    >
+      <div className="p-6 border-b border-border">
+        <div className="flex items-center space-x-3">
+          <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+            <Building2 className="w-5 h-5 text-primary-foreground" />
+          </div>
+          <span className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-600">
+            CGR Admin
+          </span>
+        </div>
+      </div>
+
+      <nav className="flex-1 overflow-y-auto py-6 px-3 space-y-1">
+        {navItems.map((item) => {
+          const isActive = pathName === item.path;
+          return (
+            <Link
+              key={item.label}
+              href={item.path}
+              className={`flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
+                isActive ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+              }`}
+            >
+              <item.icon className={`w-5 h-5 ${isActive ? "text-primary" : ""}`} />
+              <span>{item.label}</span>
+            </Link>
+          );
+        })}
+      </nav>
+
+      <div className="p-4 border-t border-border">
+        <button className="flex items-center space-x-3 w-full px-3 py-2.5 rounded-lg text-sm font-medium text-destructive hover:bg-destructive/10 transition-colors">
+          <LogOut className="w-5 h-5" />
+          <span>Sign Out</span>
+        </button>
+      </div>
+    </aside>
+  );
+};
+
+export default Sidebar;