Header and nav

LA1CH3 · May 18, 2024 · cf2858d · cf2858d
1 parent edab615
commit cf2858d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 30 deletions.
diff --git a/app/components/Header/Header.tsx b/app/components/Header/Header.tsx
@@ -1,21 +1,26 @@
+import { Link } from '@remix-run/react';
+
+const navRoutes = [
+  { to: '/about', label: 'About' },
+  { to: '/blog', label: 'Blog' },
+  { to: '/books', label: 'Books' },
+];
+
 export function Header() {
   return (
-    <header className="p-1 flex flex-col sm:flex-row">
+    <header className="flex flex-col items-center sm:flex-row">
       <h1 className="uppercase text-xl sm:mr-auto">Math Rock Stack</h1>
       <nav>
-        <ul className="flex flex-col sm:flex-row gap-4">
-          <li className="uppercase">
-            <a href="/blog">Blog</a>
-          </li>
-          <li className="uppercase">
-            <a href="/books">Books</a>
-          </li>
-          <li className="uppercase">
-            <a href="/music">Music</a>
-          </li>
-          <li className="uppercase">
-            <a href="/video-games">Video games</a>
-          </li>
+        <ul className="flex flex-col items-center justify-center sm:items-start sm:flex-row gap-1 sm:gap-4">
+          {navRoutes.map(({ to, label }) => (
+            <Link
+              key={to}
+              to={to}
+              className="uppercase hover:underline underline-offset-2"
+            >
+              {label}
+            </Link>
+          ))}
         </ul>
       </nav>
     </header>

diff --git a/app/root.tsx b/app/root.tsx
@@ -3,7 +3,7 @@ import {
   json,
   LinksFunction,
 } from '@remix-run/cloudflare';
-import { Links, Meta, Outlet, Scripts, useLoaderData } from '@remix-run/react';
+import { Links, Meta, Outlet, Scripts } from '@remix-run/react';
 import tailwindStylesHref from './tailwind.css?url';
 
 import { Header } from './components/Header/Header';
@@ -26,7 +26,7 @@ export const loader = async ({ request, context }: LoaderFunctionArgs) => {
 };
 
 export default function App() {
-  const { books, currentUser } = useLoaderData<typeof loader>();
+  // const { books, currentUser } = useLoaderData<typeof loader>();
 
   return (
     <html lang="en">
@@ -36,19 +36,12 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <Header />
-        {currentUser ? <p>Welcome back, {currentUser}!</p> : null}
-        <h2>This is a test</h2>
-        <ul>
-          {books.map((book) => (
-            <li key={book.id}>
-              <h2>{book.title}</h2>
-              <p>{book.author}</p>
-            </li>
-          ))}
-        </ul>
-        <Outlet />
-
+        <div className="py-2 px-3">
+          <Header />
+          <main>
+            <Outlet />
+          </main>
+        </div>
         <Scripts />
       </body>
     </html>

diff --git a/postcss.config.js b/postcss.config.js
@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,4 +3,4 @@ export default { @@
         tailwindcss: {},
         autoprefixer: {},
       },
-    }
+    };