Merge branch 'main' of github.com:fac30/things-we-do

src/app/insights/page.tsx

@@ -0,0 +1,7 @@
+export default function Page() {
+  return (
+    <>
+      <h1 className="text-white">this is the insights page</h1>
+    </>
+  );
+}

src/app/moods/page.tsx

@@ -1,7 +1,7 @@
 export default function Page() {
   return (
     <>
-      <h1>this is the moods page</h1>
+      <h1 className="text-white">this is the moods page</h1>
     </>
   );
 }

src/app/needs/page.tsx

@@ -0,0 +1,7 @@
+export default function Page() {
+  return (
+    <>
+      <h1 className="text-white">this is the needs page</h1>
+    </>
+  );
+}

src/app/toolkit/page.tsx

@@ -1,7 +1,7 @@
 export default function Page() {
   return (
     <>
-      <h1>This is the toolkit page</h1>
+      <h1 className="text-white">This is the toolkit page</h1>
     </>
   );
 }

src/ui/layout/Navbar/Navbar.tsx

@@ -1,10 +1,9 @@
-import NavbarButtons from "./NavbarButtons";
+import NavbarLinks from "./NavbarLinks";
 
 export default function Navbar() {
   return (
-    <>
-      <NavbarButtons />
-      <h3>asdfasdfasd</h3>;
-    </>
+    <nav className="fixed bottom-0 bg-twd-navbar-background h-20 w-screen">
+      <NavbarLinks />
+    </nav>
   );
 }

src/ui/layout/Navbar/NavbarLinks.tsx

@@ -0,0 +1,32 @@
+import {
+  HomeIcon,
+  PresentationChartLineIcon,
+  EllipsisHorizontalCircleIcon,
+  ChartBarIcon,
+} from "@heroicons/react/24/outline";
+import { WrenchIcon } from "@heroicons/react/24/solid";
+
+import NavigationLink from "./NavigationLink";
+
+const links = [
+  { title: "Home", icon: HomeIcon, destination: "/" },
+  { title: "Moods", icon: PresentationChartLineIcon, destination: "/moods" },
+  { title: "Toolkit", icon: WrenchIcon, destination: "/toolkit" },
+  { title: "Needs", icon: EllipsisHorizontalCircleIcon, destination: "/needs" },
+  { title: "Insights", icon: ChartBarIcon, destination: "/insights" },
+];
+
+export default function NavbarLinks() {
+  return (
+    <div className="grid grid-cols-5 items-center h-full w-11/12 m-auto">
+      {links.map((link, index) => (
+        <NavigationLink
+          key={index}
+          title={link.title}
+          Icon={link.icon}
+          destination={link.destination}
+        />
+      ))}
+    </div>
+  );
+}

src/ui/layout/Navbar/NavigationLink.tsx

@@ -0,0 +1,20 @@
+import Link from "next/link";
+
+interface NavbarButtonProps {
+  title: string;
+  Icon: React.ComponentType<{ className?: string }>; // Typing for Heroicons or similar
+  destination: string;
+}
+
+export default function NavigationLink({
+  title,
+  Icon,
+  destination,
+}: NavbarButtonProps) {
+  return (
+    <Link href={destination} className={`flex flex-col items-center`}>
+      <p className="text-white">{title}</p>
+      <Icon className="h-6 w-6 text-white" />
+    </Link>
+  );
+}