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,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>
+  );
+}