Brooke Christiansen 4ec3c3eafa polishing!
2025-05-08 19:07:23 -07:00

77 lines
2.0 KiB
TypeScript

import { cn } from "@/lib/utils";
interface NavbarProps {
activePage?: string;
}
export default function Navbar({ activePage = "" }: NavbarProps) {
return (
<>
<div className={cn("flex flex-row justify-between pb-8 pl-4 pr-4 pt-8")}>
<div>
<strong className={cn("sm:text-2xl md:text-4xl")}>
<a
className={cn(
activePage === "Home" && "border-b-2 border-black-500",
)}
href="/">Resist Tech Monopolies</a>
</strong>
</div>
<strong className={cn("sm:text-1xl flex gap-10 md:text-4xl")}>
<a
href="/PointsOfUnity/"
className={cn(
"text-green-500",
activePage === "PointsOfUnity" && "border-b-2 border-green-500",
)}
>
Points of Unity
</a>
<a
href="/WhatWereWorkingOn/"
className={cn(
"text-red-500",
activePage === "WhatWereWorkingOn" && "border-b-2 border-red-500",
)}
>
What We're Working On
</a>
</strong>
</div>
<div className={cn("flex flex-row justify-between pb-8")}>
{[
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
].map(() => (
<>
<a
href="https://www.flaticon.com/free-icons/computer"
title="computer icons"
>
<img
src="../public/assets/computer.png"
alt="computer icon"
width="30"
height="30"
/>
</a>
<a
href="https://www.flaticon.com/free-icons/peopler"
title="people icons"
>
<img
src="../public/assets/people.png"
alt="people icon"
width="30"
height="30"
/>
</a>
</>
))}
</div>
</>
);
}