58 lines
2.5 KiB
TypeScript
58 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { faWordpressSimple } from '@fortawesome/free-brands-svg-icons';
|
|
import { faLink, faHouse, faUser, faPhone, faBars, faTimes, faTerminal, faMusic } from '@fortawesome/free-solid-svg-icons';
|
|
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
|
|
interface NavItemProps {
|
|
href: string;
|
|
icon: IconDefinition;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
const NavItem = ({ href, icon, children }: NavItemProps) => (
|
|
<li>
|
|
<Link href={href} className="flex items-center text-gray-300 hover:text-white hover:bg-gray-700 rounded-md px-3 py-2 transition-all duration-300">
|
|
<FontAwesomeIcon icon={icon} className="text-md mr-2" />
|
|
{children}
|
|
</Link>
|
|
</li>
|
|
);
|
|
|
|
export default function Header() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const toggleMenu = () => setIsOpen(!isOpen);
|
|
|
|
return (
|
|
<header className="bg-gray-800 shadow-lg">
|
|
<nav className="container mx-auto px-4 py-4 flex justify-between items-center">
|
|
<Link href="/" className="text-gray-300 hover:text-white text-2xl font-bold transition-all duration-300 hover:glow">
|
|
aidxn.cc
|
|
</Link>
|
|
<button onClick={toggleMenu} className="md:hidden text-gray-300 focus:outline-none">
|
|
<FontAwesomeIcon icon={isOpen ? faTimes : faBars} className="text-2xl" />
|
|
</button>
|
|
<ul className={`flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4 absolute md:static bg-gray-800 md:bg-transparent w-full md:w-auto left-0 md:left-auto top-16 md:top-auto p-4 md:p-0 transition-all duration-300 ease-in-out ${isOpen ? 'flex' : 'hidden md:flex'}`}>
|
|
<NavItem href="/" icon={faHouse}>Home</NavItem>
|
|
<NavItem href="/about" icon={faUser}>About</NavItem>
|
|
<NavItem href="/contact" icon={faPhone}>Contact</NavItem>
|
|
<NavItem href="/domains" icon={faLink}>Domains</NavItem>
|
|
<NavItem href="https://blog.aidxn.fun/" icon={faWordpressSimple}>Blog</NavItem>
|
|
<NavItem href="/music" icon={faMusic}>Music by Time</NavItem>
|
|
<li className="flex items-center">
|
|
<NavItem href="https://tilde.club/~lxu" icon={faTerminal}>Tilde</NavItem>
|
|
<a href="https://tilde.wiki/Tildeverse" className="text-gray-300 hover:text-green-400 ml-1 text-sm" target="_blank" rel="noopener noreferrer">
|
|
<sup>what?</sup>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
);
|
|
}
|
|
|