styling

zarazan · Nov 15, 2024 · 1202754 · 1202754
1 parent db28eb9
commit 1202754
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 16 deletions.
diff --git a/app/javascript/components/App.tsx b/app/javascript/components/App.tsx
@@ -3,14 +3,17 @@ import { Routes, Route } from "react-router-dom";
 
 import Layout from "./Layout";
 import Home from "./Home";
+import Search from "./Search";
 import RecipeTable from "./RecipeTable";
 
 const App: React.FC = () => {
   return (
     <Routes>
       <Route path="/" element={<Layout />}>
         <Route index element={<Home />} />
+        <Route path="search" element={<Search />} />
         <Route path="recipes" element={<RecipeTable />} />
+        <Route path="ingredients" element={<RecipeTable />} />
       </Route>
     </Routes>
   );

diff --git a/app/javascript/components/Layout.tsx b/app/javascript/components/Layout.tsx
@@ -1,25 +1,41 @@
 import React from 'react';
 import { Outlet, Link } from "react-router-dom";
 
-function Layout(): React.ReactElement {
+const Layout = (): JSX.Element => {
   return (
-    <div>
-      <nav>
-        <ul>
-          <li>
-            <Link to="/">Home</Link>
-          </li>
-          <li>
-            <Link to="/recipes">Recipes</Link>
-          </li>
-        </ul>
-      </nav>
+    <div className="m-2">
+      <div className="flex m-6">
+        <h1>ICON</h1>
+        <Nav />
+        <h1 className="ml-auto">PROFILE</h1>
+      </div>
 
-      <hr />
-
-      <Outlet />
+      <div className="m-6">
+        <Outlet />
+      </div>
     </div>
   )
 }
 
+const Nav = (): JSX.Element => {
+  return (
+    <nav className="ml-2">
+      <ul className="flex gap-2">
+        <NavLink name="Home" path="/" />
+        <NavLink name="Search" path="/search" />
+        <NavLink name="Recipes" path="/recipes" />
+        <NavLink name="Ingredients" path="/ingredients" />
+      </ul>
+    </nav>
+  )
+}
+
+const NavLink = ({ name, path }: {name: string, path: string}): JSX.Element => {
+  return (
+    <li>
+      <Link to={path} className="text-green-600">{name}</Link>
+    </li>
+  )
+}
+
 export default Layout;
diff --git a/app/javascript/components/Search.tsx b/app/javascript/components/Search.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+function Home(): React.ReactElement {
+  return (
+    <div>
+      <input type="text"></input>
+      <button>Search</button>
+    </div>
+  );
+}
+
+export default Home;
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -21,7 +21,7 @@
     <%= javascript_include_tag "application", type: "module" %>
   </head>
 
-  <body class="bg-stone-800 text-orange-600">
+  <body class="bg-neutral-900 text-orange-600">
     <%= yield %>
   </body>
 </html>