joe/next-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lint and TRPC

Browse Source
This commit is contained in:
Joe Monk
2024-12-17 18:27:08 +00:00
parent 28cf5edc6a
commit 3f62ec6251
16 changed files with 1816 additions and 1224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/navbar-client.tsx
View File

@@ -1,27 +1,39 @@
'use client';
import { useMemo, useState } from 'react';
import Link from 'next/link';
import { HomeModernIcon, Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
import { AnimatePresence, m, LazyMotion, domAnimation } from "framer-motion";
import { usePathname } from 'next/navigation';
import ThemeSwitcher from './theme-switcher';
"use client";
import { useMemo, useState } from "react";
import Link from "next/link";
import {
HomeModernIcon,
Bars3Icon,
XMarkIcon,
} from "@heroicons/react/24/outline";
import {
AnimatePresence,
motion,
LazyMotion,
domAnimation,
} from "framer-motion";
import { usePathname } from "next/navigation";
import ThemeSwitcher from "./theme-switcher";
type NavBarClientProps = {
LogIn: React.JSX.Element,
type NavBarClientProps = {
LogIn: React.JSX.Element;
navigation: {
name: string;
href: string;
current: boolean;
}[]
}
}[];
};
export default function NavBarClient({LogIn, navigation}: NavBarClientProps): React.JSX.Element {
export default function NavBarClient({
LogIn,
navigation,
}: NavBarClientProps): React.JSX.Element {
const [open, setOpen] = useState(false);
const pathname = usePathname();
const activeNavigation = useMemo((): typeof navigation => {
const nav = structuredClone(navigation);
const current = nav.find((nav) => nav.href === pathname);
if (current) {
current.current = true;
@@ -35,64 +47,70 @@ export default function NavBarClient({LogIn, navigation}: NavBarClientProps): Re
<div className="mx-auto max-w-7xl px-4">
<div className="relative flex h-16 items-center justify-between">
<div className="flex">
<button className='sm:hidden dark:hover:bg-dracula-bg-light transition-colors duration-100 rounded-sm p-1' onClick={() => setOpen(!open)}>
<button
className="sm:hidden dark:hover:bg-dracula-bg-light transition-colors duration-100 rounded-sm p-1"
onClick={() => setOpen(!open)}
>
{open ? (
<XMarkIcon className='rounded-sm dark:stroke-dracula-cyan h-8 w-auto'/>
<XMarkIcon className="rounded-sm dark:stroke-dracula-cyan h-8 w-auto" />
) : (
<Bars3Icon className='rounded-sm dark:stroke-dracula-cyan h-8 w-auto'/>
<Bars3Icon className="rounded-sm dark:stroke-dracula-cyan h-8 w-auto" />
)}
</button>
<Link className='hidden sm:flex items-center p-1 dark:hover:bg-dracula-bg-light transition-colors' href='/'>
<HomeModernIcon className='dark:stroke-dracula-cyan rounded-sm h-8 w-auto'/>
<Link
className="hidden sm:flex items-center p-1 dark:hover:bg-dracula-bg-light transition-colors"
href="/"
>
<HomeModernIcon className="dark:stroke-dracula-cyan rounded-sm h-8 w-auto" />
</Link>
<div className='space-x-5 hidden sm:flex ml-10'>
<div className="space-x-5 hidden sm:flex ml-10">
{activeNavigation.map((item) => (
<Link
key={item.name}
href={item.href}
className={`dark:hover:bg-dracula-bg-light transition-colors duration-100 dark:text-white rounded-sm px-3 pt-2 pb-1.5 font-normal border-b-2 border-transparent ${
item.current ? 'dark:border-b-dracula-pink' : ''
item.current ? "dark:border-b-dracula-pink" : ""
}`}
aria-current={item.current ? 'page' : undefined}
aria-current={item.current ? "page" : undefined}
>
{item.name}
</Link>
))}
</div>
</div>
<div className='space-x-4 flex'>
<ThemeSwitcher/>
<div className="space-x-4 flex">
<ThemeSwitcher />
{LogIn}
</div>
</div>
</div>
<AnimatePresence>
{ open ? (
<m.div
{open ? (
<motion.div
initial={{ height: 0 }}
animate={{ height: "auto" }}
transition={{ duration: 0.15, ease: 'linear' }}
transition={{ duration: 0.15, ease: "linear" }}
exit={{ height: 0 }}
className='sm:hidden overflow-hidden'
className="sm:hidden overflow-hidden"
>
<div className='flex flex-col space-y-1 py-1'>
<div className="flex flex-col space-y-1 py-1">
{activeNavigation.map((item) => (
<Link
key={item.name}
href={item.href}
className={`dark:hover:bg-dracula-bg-light transition-colors duration-100 dark:text-white px-2 py-2 font-normal border-l-4 border-transparent ${
item.current ? 'dark:border-l-dracula-pink' : ''
item.current ? "dark:border-l-dracula-pink" : ""
}`}
aria-current={item.current ? 'page' : undefined}
aria-current={item.current ? "page" : undefined}
>
{item.name}
</Link>
))}
</div>
</m.div>
</motion.div>
) : null}
</AnimatePresence>
</LazyMotion>
</nav>
);
}
}