50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
import { m } from "framer-motion";
|
|
import Link from "next/link";
|
|
import { ReactComponentElement, ReactElement } from "react";
|
|
|
|
const DefaultNavOption = ({
|
|
label,
|
|
href,
|
|
}: {
|
|
label: string;
|
|
href: string;
|
|
}): ReactElement => {
|
|
return (
|
|
<Link href={href} key={label} className="w-full text-center">
|
|
<m.div
|
|
initial={{
|
|
scale: 1,
|
|
}}
|
|
whileHover={{
|
|
scale: 1.05,
|
|
transition: {
|
|
duration: 0.2,
|
|
},
|
|
}}
|
|
whileTap={{
|
|
scale: 0.95,
|
|
transition: {
|
|
duration: 0.2,
|
|
},
|
|
}}
|
|
>
|
|
<p className="pointer-events-auto relative select-none pl-3 pr-3 font-plusJakarta text-white md:pl-5 md:pr-5">
|
|
{label}
|
|
</p>
|
|
</m.div>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
interface NavTemplate {
|
|
content: ReactComponentElement<any> | ReactElement;
|
|
}
|
|
|
|
const homeMain: NavTemplate[] = [
|
|
{ content: <DefaultNavOption label="Home" href="/" /> },
|
|
{ content: <DefaultNavOption label="About" href="/about" /> },
|
|
{ content: <DefaultNavOption label="Team" href="/team" /> },
|
|
{ content: <DefaultNavOption label="Contact" href="/contact" /> },
|
|
];
|
|
|
|
export { type NavTemplate, homeMain };
|