52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
interface NavLinksProps {
|
|
mobile?: boolean;
|
|
onLinkClick?: () => void;
|
|
}
|
|
|
|
const NavLinks = ({ mobile = false, onLinkClick }: NavLinksProps) => {
|
|
const pathname = usePathname();
|
|
|
|
const containerClass = mobile
|
|
? "flex flex-col items-center gap-4 text-lg min-[828px]:flex-row min-[828px]:gap-6"
|
|
: "hidden md:flex items-center gap-8 text-lg";
|
|
|
|
return (
|
|
<nav className={containerClass}>
|
|
<Link href="/services" onClick={onLinkClick}>
|
|
<span
|
|
className={`${
|
|
pathname === "/services" && "text-[var(--color-8)]"
|
|
} font-mono`}
|
|
>
|
|
Service
|
|
</span>
|
|
</Link>
|
|
<Link href="/about" onClick={onLinkClick}>
|
|
<span
|
|
className={`${
|
|
pathname === "/about" && "text-[var(--color-8)]"
|
|
} font-mono`}
|
|
>
|
|
About us
|
|
</span>
|
|
</Link>
|
|
<Link href="/contact" onClick={onLinkClick}>
|
|
<span
|
|
className={`${
|
|
pathname === "/contact" && "text-[var(--color-8)]"
|
|
} font-mono`}
|
|
>
|
|
Contact
|
|
</span>
|
|
</Link>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default NavLinks;
|