heavy work on ui, recipe page connects to db

client/src/App.tsx

@@ -1,4 +1,10 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Browser from './components/pages/Browser';
+import Collection from './components/pages/Collection';
+import Login from './components/pages/Login';
+import Profile from './components/pages/Profile';
+import Recipe from './components/pages/Recipe';
+import Register from './components/pages/Register';
 import Welcome from './components/pages/Welcome';
 import './sass/App.scss'
 
@@ -8,7 +14,13 @@ function App() {
     <BrowserRouter>
       <div className="App">
         <Routes>
-          <Route path="/" element={<Welcome />} />
+          <Route path="/"               element={<Welcome />} />
+          <Route path="/register"       element={<Register />} />
+          <Route path="/login"          element={<Login />} />
+          <Route path="/profile"        element={<Profile />} />
+          <Route path="/collection"     element={<Collection />} />
+          <Route path="/explore"        element={<Browser />} />
+          <Route path="/recipe/:id"     element={<Recipe />} />
         </Routes>
       </div>
     </BrowserRouter>

client/src/components/pages/Browser.tsx

@@ -0,0 +1,17 @@
+import { Button, Page } from "../ui";
+
+export default function Browser() {
+    return (
+        <Page>
+            <h1>Search recipes</h1>
+            <div>
+                <input type="text"></input>
+                <Button>ADVANCED SEARCH</Button>
+            </div>
+
+            {/* divider */}
+
+            {/* recipe cards, or "no recipes matching your search" */}
+        </Page>
+    )
+}

client/src/components/pages/Collection.tsx

@@ -0,0 +1,14 @@
+import { Page } from "../ui";
+
+export default function Collection() {
+    return (
+        <Page>
+            <h1>Mikayla's collection</h1>
+            <p>37 recipes</p>
+            <p>71 ingredients</p>
+            <p>11 types of cuisine</p>
+
+            {/* recipes */}
+        </Page>
+    )
+}

client/src/components/pages/Login.tsx

@@ -0,0 +1,14 @@
+import { Button, Page } from "../ui";
+
+export default function Login() {
+    return (
+        <Page>
+            <h1>Hello! Nice to see you again.</h1>
+
+            {/* login form */}
+
+            <Button onClick={() => {}}>Log In</Button>
+            <p>Not registered yet? You can do that here.</p>
+        </Page>
+    )
+}

client/src/components/pages/Profile.tsx

@@ -0,0 +1,9 @@
+import { Page } from "../ui";
+
+export default function Profile() {
+    return (
+        <Page>
+            <h1>Mikayla Dobson</h1>
+        </Page>
+    )
+}

client/src/components/pages/ProfileSettings/index.tsx

@@ -0,0 +1,9 @@
+import { Page } from "../../ui";
+
+export default function ProfileSettings() {
+    return (
+        <Page>
+            <h1>Profile Settings</h1>
+        </Page>
+    )
+}

client/src/components/pages/Recipe.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { Page, Panel } from "../ui";
+
+interface IRecipe {
+    id: number
+    name: string
+    description: string
+    preptime: string
+    datecreated?: string
+    dateupdated?: string
+}
+
+export default function Recipe() {
+    const { id } = useParams();
+    const [recipe, setRecipe] = useState<IRecipe>();
+
+    const getRecipeByID = async () => {
+        const result = await fetch('http://localhost:8080/recipe/' + id)
+        .then(response => response.json())
+        .then(data => setRecipe(data));
+    }
+
+    useEffect(() => {
+        getRecipeByID();
+    }, [])
+
+    return (
+        <Page>
+            { recipe && (
+                <Panel>
+                    <h1>{recipe.name}</h1>
+                    <p>{recipe.description}</p>
+                    <p>{recipe.preptime}</p>
+                </Panel>
+            )}
+        </Page>
+    )
+}

client/src/components/pages/Register/index.tsx

@@ -0,0 +1,10 @@
+import { Page } from "../../ui";
+import AboutYou from "./register.aboutyou";
+
+export default function Register() {
+    return (
+        <Page>
+            <AboutYou />
+        </Page>
+    )
+}

client/src/components/pages/Register/register.aboutyou.tsx

@@ -0,0 +1,15 @@
+import { Page } from "../../ui";
+
+export default function AboutYou() {
+    return (
+        <Page>
+            <h1>Hi! Thanks for being here.</h1>
+
+            {/* divider */}
+            
+            <h2>Tell us a bit about yourself:</h2>
+
+            {/* auth form */}
+        </Page>
+    )
+}

client/src/components/pages/Register/register.addfriends.tsx

@@ -0,0 +1,11 @@
+import { Page } from "../../ui";
+
+export default function AddFriends() {
+    let user = null;
+
+    return (
+        <Page>
+            <h1>Hi, {user || "Mikayla"}! Great to meet you.</h1>
+        </Page>
+    )
+}

client/src/components/pages/Register/register.collection.tsx

@@ -0,0 +1,11 @@
+import { Page } from "../../ui";
+
+export default function InitialCollection() {
+    let user = null;
+
+    return (
+        <Page>
+            <h1>Hi, {user || "Mikayla"}! Great to meet you.</h1>
+        </Page>
+    )
+}

client/src/components/pages/Welcome.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Button, Page, Panel } from "../ui"
+import Divider from "../ui/Divider";
 
 const Welcome = () => {
     const [authorized, setAuthorized] = useState(false);
@@ -22,19 +23,25 @@ const Welcome = () => {
     )
 
     return (
-        <Page extraStyles='App'>
+        <Page extraStyles="narrow-dividers">
             <Panel extraStyles='inherit-background c-papyrus uppercase'>
                 <h1>Welcome to Recipin</h1>
             </Panel>
 
+            <Divider />
+
             <Panel extraStyles="inherit-background c-papyrus uppercase">
                 <h2>Simple Recipe Management and Sharing for the Home</h2>
             </Panel>
 
+            <Divider />
+
             <Panel extraStyles="inherit-background c-papyrus uppercase">
                 <h2>Build Shopping Lists Directly from Your Recipes</h2>
             </Panel>
 
+            <Divider />
+
             { authorized ? authUserActions : callToRegister }
         </Page>
     )

client/src/components/ui/Divider.tsx

@@ -0,0 +1,7 @@
+import "/src/sass/components/Divider.scss";
+
+export default function Divider({ extraClasses = "" }) {
+    return (
+        <div className={`divider ${extraClasses}`}></div>
+    )
+}

client/src/main.tsx

@@ -3,8 +3,4 @@ import ReactDOM from 'react-dom/client'
 import App from './App'
 import './sass/index.scss'
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<App />)
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-)

client/src/sass/components/Divider.scss

@@ -0,0 +1,12 @@
+@import "../helpers/variables";
+@import "../helpers/placeholders";
+
+.divider {
+    display: block;
+    height: 4px;
+    width: 75%;
+    border-radius: 35%;
+    background-color: $papyrus;
+
+    @extend %variations;
+}

client/src/sass/helpers/_placeholders.scss

@@ -12,4 +12,10 @@
     &.uppercase {
         text-transform: uppercase;
     }
+
+    &.narrow-dividers {
+        .divider {
+            width: 45vw;
+        }
+    }
 }