aidan/aidxnCC
1
1
Fork 0
Code Issues 1 Pull requests 1 Projects Releases Packages Wiki Activity Actions

migrate from fontawesome to lucide-react (i hate fontawesome now), add manifesto from old website (w/ edits), improve function names

Browse source
This commit is contained in:
Aidan 2025-01-28 23:59:18 -05:00
parent ab191ac1fc
commit f45a452225
8 changed files with 105 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

28
app/components/Header.tsx
View file

@ -1,22 +1,19 @@
"use client";
import { useState } from 'react';
import React, { 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';
import { House, Link as LinkIcon, User, Phone, BookOpen, Rss, Music, SquareTerminal, X, Menu } from 'lucide-react';
interface NavItemProps {
href: string;
icon: IconDefinition;
icon: React.ElementType;
children: React.ReactNode;
}
const NavItem = ({ href, icon, children }: NavItemProps) => (
<div className="nav-item">
<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" />
{React.createElement(icon, { className: "text-md mr-2", strokeWidth: 2.5, size: 20 })}
{children}
</Link>
</div>
@ -34,17 +31,18 @@ export default function Header() {
aidxn.cc
</Link>
<button onClick={toggleMenu} className="md:hidden text-gray-300 focus:outline-none">
<FontAwesomeIcon icon={isOpen ? faTimes : faBars} className="text-2xl" />
{isOpen ? <X className="text-2xl" /> : <Menu 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>
<NavItem href="/" icon={House}>Home</NavItem>
<NavItem href="/about" icon={User}>About</NavItem>
<NavItem href="/contact" icon={Phone}>Contact</NavItem>
<NavItem href="/domains" icon={LinkIcon}>Domains</NavItem>
<NavItem href="/manifesto" icon={BookOpen}>Manifesto</NavItem>
<NavItem href="https://blog.aidxn.fun/" icon={Rss}>Blog</NavItem>
<NavItem href="/music" icon={Music}>Music by Time</NavItem>
<div className="flex items-center">
<NavItem href="https://tilde.club/~lxu" icon={faTerminal}>Tilde</NavItem>
<NavItem href="https://tilde.club/~lxu" icon={SquareTerminal}>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>