awesome ui changes

src/components/nav-link.tsx

@@ -2,25 +2,46 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import React from "react";
-
-import * as LucideIcons from "lucide-react";
+import { Icons } from "./icons";
 import { Button } from "./ui/button";
 import { cn } from "@/lib/utils";
 
 function NavLink({ href, name, icon }: NavLink) {
   const active = usePathname() === href;
-  const IconComponent = icon
-    ? (LucideIcons[icon as keyof typeof LucideIcons] as LucideIcons.LucideIcon)
-    : null;
+  const IconComponent = icon ? Icons[icon as keyof typeof Icons] : null;
   return (
-    <Button
-      asChild
-      size={"icon"}
-      variant={"ghost"}
-      className={cn(active && "text-primary bg-accent/25")}
-    >
-      <Link href={href}>{IconComponent && <IconComponent />}</Link>
-    </Button>
+    <div className="relative">
+      <Button
+        asChild
+        variant={"ghost"}
+        className={cn(
+          "p-2 size-12 text-muted-foreground/75 flex flex-col gap-2 ",
+          active && "text-foreground "
+        )}
+      >
+        <Link href={href}>
+          {IconComponent && (
+            <IconComponent
+              className={cn(
+                "size-6 transition-transform duration-300",
+                active && "scale-150"
+              )}
+            />
+          )}
+          <span
+            className={cn(
+              "text-xs -translate-y-1 transition-transform duration-300",
+              active && "translate-y-0"
+            )}
+          >
+            {name}
+          </span>
+        </Link>
+      </Button>
+      {active && (
+        <div className="h-16 w-16 left-1/2 -z-10 -translate-x-1/2 transform blur-3xl  absolute -bottom-8 bg-primary" />
+      )}
+    </div>
   );
 }