Add basic contact page

src/Client/src/components/NavBar.tsx

@@ -1,9 +1,10 @@
 import { Dialog, Popover } from "@headlessui/react";
 import { useState } from "react";
 import { FaBars, FaXmark } from "react-icons/fa6";
-import { Link, NavLink } from "react-router-dom";
+import { Link } from "react-router-dom";
 import logo from "../assets/logo.webp";
 import SocialIcons from "./SocialIcons";
+import NavLink from "./NavLink";
 
 export default function NavBar() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -31,12 +32,8 @@ export default function NavBar() {
           </button>
         </div>
         <Popover.Group className="hidden lg:flex lg:gap-x-12">
-          <NavLink to="/contact" className="text-sm font-semibold leading-6">
+          <NavLink to="/contact">Contact</NavLink>
-            Contact
+          <NavLink to="/about">This App</NavLink>
-          </NavLink>
-          <NavLink to="/about" className="text-sm font-semibold leading-6">
-            This App
-          </NavLink>
         </Popover.Group>
       </nav>
       <Dialog
@@ -48,10 +45,10 @@ export default function NavBar() {
         <div className="fixed inset-0 z-10" />
         <Dialog.Panel className="fixed inset-y-0 right-0 z-10 bg-black w-full overflow-y-auto px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10 text-white sm:border-l-2">
           <div className="flex items-center justify-between">
-            <a href="#" className="-m-1.5 p-1.5">
+            <Link to="/" className="-m-1.5 p-1.5">
               <span className="sr-only">Beau Findlay</span>
               <img className="h-16 w-auto" src={logo} alt="Logo" />
-            </a>
+            </Link>
             <button
               type="button"
               className="-m-2.5 rounded-md p-2.5"

src/Client/src/components/NavLink.tsx

@@ -0,0 +1,23 @@
+import { NavLink as ReactNavLink } from "react-router-dom";
+
+interface Props {
+  children: string;
+  to: string;
+  className?: string | null;
+}
+
+export default function NavLink({ children, to, className }: Props) {
+  const defaultStyles = "text-sm font-semibold leading-6";
+  const styles = className ? className : defaultStyles;
+
+  return (
+    <ReactNavLink
+      to={to}
+      className={({ isActive }) =>
+        isActive ? `${styles} underline underline-offset-2` : styles
+      }
+    >
+      {children}
+    </ReactNavLink>
+  );
+}

src/Client/src/components/Text.tsx

@@ -2,8 +2,12 @@ import { ReactNode } from "react";
 
 interface Props {
   children: ReactNode;
+  className?: string | null;
 }
 
-export default function Text({ children }: Props) {
+export default function Text({ children, className }: Props) {
-  return <p className="text-xl py-4">{children}</p>;
+  const defaultStyles = "text-lg py-2";
+  const styles = className ? `${defaultStyles} ${className}` : defaultStyles;
+
+  return <p className={styles}>{children}</p>;
 }

src/Client/src/components/Title.tsx

@@ -1,7 +1,11 @@
 interface Props {
   children: string;
+  className?: string | null;
 }
 
-export default function Title({ children }: Props) {
+export default function Title({ children, className }: Props) {
-  return <h1 className="text-4xl">{children}</h1>;
+  const defaultStyles = "text-4xl";
+  const styles = className ? `${defaultStyles} ${className}` : defaultStyles;
+
+  return <h1 className={styles}>{children}</h1>;
 }

src/Client/src/pages/ContactPage.tsx

@@ -0,0 +1,14 @@
+import Text from "../components/Text";
+import Title from "../components/Title";
+
+export default function ContactPage() {
+  return (
+    <>
+      <Title className="text-center">Contact</Title>
+      <Text className="text-center py-8">
+        If you think I can help with your project or you'd just like to talk
+        tech, send me a message!
+      </Text>
+    </>
+  );
+}

src/Client/src/routes.tsx

@@ -1,12 +1,16 @@
 import { createBrowserRouter } from "react-router-dom";
 import Layout from "./pages/Layout";
 import HomePage from "./pages/HomePage";
+import ContactPage from "./pages/ContactPage";
 
 const router = createBrowserRouter([
   {
     path: "/",
     element: <Layout />,
-    children: [{ index: true, element: <HomePage /> }],
+    children: [
+      { index: true, element: <HomePage /> },
+      { path: "contact", element: <ContactPage /> },
+    ],
   },
 ]);