Pretty Ui Update

2026-03-13 00:04:51 +01:00
parent 855cb4affd
commit 4690084dbe
12 changed files with 515 additions and 265 deletions
@@ -0,0 +1,38 @@
+import { useUmami } from "@danielgtmn/umami-react";
+import { Link, useLocation } from "react-router-dom";
+
+export function Navbar() {
+  const location = useLocation();
+
+  const navItems = [
+    { label: "Home", path: "/" },
+    { label: "About", path: "/about" },
+    { label: "Connect", path: "/contact" },
+  ];
+
+  const handleSwitch = (path: string) => {
+    useUmami().track("nav_to_" + path.replaceAll("/", "_"));
+  };
+
+  return (
+    <nav className="fixed top-8 left-1/2 -translate-x-1/2 z-[100] w-[min(90%,400px)]">
+      <div className="bg-black/20 backdrop-blur-xl border border-white/10 rounded-full px-6 py-3 flex items-center justify-between gap-4 shadow-2xl">
+        {navItems.map((item) => (
+          <Link
+            key={item.path}
+            to={item.path}
+            onClick={() => handleSwitch(item.path)}
+            className={`text-sm font-semibold transition-all duration-300 px-4 py-2 rounded-full 
+              ${
+                location.pathname === item.path
+                  ? "bg-white text-black scale-105 shadow-xl shadow-white/10"
+                  : "text-gray-400 hover:text-white"
+              }`}
+          >
+            {item.label}
+          </Link>
+        ))}
+      </div>
+    </nav>
+  );
+}