IIiinit

src/components/nav-link.tsx

@@ -0,0 +1,27 @@
+"use client";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import React from "react";
+
+import * as LucideIcons from "lucide-react";
+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;
+  return (
+    <Button
+      asChild
+      size={"icon"}
+      variant={"ghost"}
+      className={cn(active && "text-primary bg-accent/25")}
+    >
+      <Link href={href}>{IconComponent && <IconComponent />}</Link>
+    </Button>
+  );
+}
+
+export default NavLink;