change project part

2026-05-24 21:50:36 +06:00
parent 92f56a42ad
commit 8805bab731
9 changed files with 35 additions and 35 deletions
@@ -0,0 +1,27 @@
+export default function OverviewPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Overview</h1>
+        <p className="text-muted-foreground">
+          Welcome back. Here is what's happening with your projects today.
+        </p>
+      </div>
+
+      {/* Example Content Grid */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {[1, 2, 3, 4].map((i) => (
+          <div 
+            key={i} 
+            className="rounded-xl border border-border bg-card p-6 shadow-sm"
+          >
+            <div className="text-sm font-medium text-muted-foreground">Stat Title</div>
+            <div className="text-2xl font-bold">2,45{i}</div>
+          </div>
+        ))}
+      </div>
+
+      
+    </div>
+  );
+}
@@ -0,0 +1,83 @@
+
+import { cn } from "@/lib/utils";
+import {
+  BookOpen,
+  FolderKanban,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  MessageSquareQuote,
+  User,
+  Users,
+} from "lucide-react";
+import { Link } from "react-router-dom";
+
+const navItems = [
+  { title: "Overview", icon: LayoutDashboard, href: "/dashboard" },
+  { title: "Manage Projects", icon: FolderKanban, href: "/dashboard/projects" },
+  { title: "Manage Team", icon: Users, href: "/dashboard/team" },
+  {
+    title: "Manage Client Review",
+    icon: MessageSquareQuote,
+    href: "/dashboard/reviews",
+  },
+  { title: "Manage Blogs", icon: BookOpen, href: "/dashboard/blogs" },
+  { title: "Manage FAQ", icon: HelpCircle, href: "/dashboard/faq" },
+];
+
+export default function Sidebar({ isCollapsed }: { isCollapsed: boolean }) {
+  return (
+    <aside
+      className={cn(
+        "sticky top-0 h-screen border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-all duration-300 flex flex-col",
+        isCollapsed ? "w-17" : "w-70",
+      )}
+    >
+    
+      <div className="h-16 flex items-center px-6">
+        <Link to="/" className={cn("font-bold truncate text-4xl", isCollapsed && "hidden")}>
+          TechZaa
+        </Link>
+        {isCollapsed && <span className="font-bold mx-auto text-xl">TZ</span>}
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 p-3 space-y-1 overflow-y-auto">
+        {navItems.map((item) => (
+          <Link
+            key={item.title}
+            to={item.href}
+            className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-colors group"
+          >
+            <item.icon className="h-5 w-5 shrink-0" />
+            {!isCollapsed && (
+              <span className="text-sm font-medium">{item.title}</span>
+            )}
+          </Link>
+        ))}
+      </nav>
+
+      {/* Footer: Signout & Profile */}
+      <div className="p-3 border-t border-sidebar-border space-y-1">
+        <button className="w-full flex items-center gap-3 px-3 py-2 rounded-md text-destructive hover:bg-destructive/10 transition-colors">
+          <LogOut className="h-5 w-5 shrink-0" />
+          {!isCollapsed && (
+            <span className="text-sm font-medium">Sign Out</span>
+          )}
+        </button>
+
+        <div className="flex items-center gap-3 px-3 py-3 mt-2 rounded-lg bg-sidebar-accent/50">
+          <div className="h-8 w-8 rounded-full bg-sidebar-primary flex items-center justify-center text-sidebar-primary-foreground">
+            <User className="h-5 w-5" />
+          </div>
+          {!isCollapsed && (
+            <div className="flex flex-col truncate">
+              <span className="text-xs font-semibold">User Name</span>
+              <span className="text-[10px] opacity-70">admin@site.com</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </aside>
+  );
+}
@@ -0,0 +1,71 @@
+import { useTheme } from "@/contexts/ThemeContext";
+import { motion, AnimatePresence } from "framer-motion";
+import { Moon, PanelLeftClose, PanelLeftOpen, Sun } from "lucide-react";
+
+interface TopbarProps {
+  toggleSidebar: () => void;
+  isCollapsed: boolean;
+}
+
+export default function Topbar({ toggleSidebar, isCollapsed }: TopbarProps) {
+    const { mode, toggleMode } = useTheme();
+
+  return (
+    <header className="h-16 border-b border-border bg-background/95 backdrop-blur px-6 flex items-center justify-between sticky top-0 z-10">
+      <div className="flex items-center gap-4">
+        <button
+          onClick={toggleSidebar}
+          className="p-2 rounded-md hover:bg-accent transition-colors"
+        >
+          {isCollapsed ? (
+            <PanelLeftOpen className="h-5 w-5" />
+          ) : (
+            <PanelLeftClose className="h-5 w-5" />
+          )}
+        </button>
+      </div>
+
+      <div className="flex items-center gap-4">
+          <motion.button
+                onClick={toggleMode}
+                className="p-1.5 rounded-full neon-glow transition-all"
+                whileHover={{ scale: 1.1 }}
+                whileTap={{ scale: 0.9 }}
+                aria-label="Toggle theme mode"
+              >
+                <AnimatePresence mode="wait">
+                  {mode === "dark" ? (
+                    <motion.div
+                      key="sun"
+                      initial={{ rotate: -90, opacity: 0 }}
+                      animate={{ rotate: 0, opacity: 1 }}
+                      exit={{ rotate: 90, opacity: 0 }}
+                      transition={{ duration: 0.2 }}
+                    >
+                      <Sun className="w-5 h-5 text-primary" />
+                    </motion.div>
+                  ) : (
+                    <motion.div
+                      key="moon"
+                      initial={{ rotate: 90, opacity: 0 }}
+                      animate={{ rotate: 0, opacity: 1 }}
+                      exit={{ rotate: -90, opacity: 0 }}
+                      transition={{ duration: 0.2 }}
+                    >
+                      <Moon className="w-5 h-5 text-primary" />
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </motion.button>
+        <div className="h-9 w-9 rounded-full border border-border bg-muted overflow-hidden">
+          {/* Avatar Image would go here */}
+          <img
+            src="https://github.com/shadcn.png"
+            alt="Avatar"
+            className="h-full w-full object-cover"
+          />
+        </div>
+      </div>
+    </header>
+  );
+}