51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
"use client";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import React from "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 ? Icons[icon as keyof typeof Icons] : null;
|
|
return (
|
|
<div className="relative">
|
|
<Button
|
|
asChild
|
|
variant={"ghost"}
|
|
className={cn(
|
|
"p-2 size-12 text-muted-foreground/75 flex flex-col gap-2 hover:bg-transparent dark:hover:bg-transparent ",
|
|
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>
|
|
|
|
{/* Glow effect */}
|
|
{active && (
|
|
<div className="size-16 left-1/2 -z-10 -translate-x-1/2 transform blur-3xl absolute -bottom-8 bg-gradient-to-t from-primary to-transparent" />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default NavLink;
|