building out more text content, site structure

client/src/App.tsx

@@ -13,6 +13,8 @@ import UserProfile from './components/User/UserProfile'
 import UserSettings from './components/User/UserSettings'
 import OrderHistory from './components/Order/OrderHistory'
 import OrderRecord from './components/Order/OrderRecord'
+import Philosophy from './components/Content/Philosophy'
+import Contact from './components/Content/Contact'
 
 // util
 import { SupabaseProvider, useSupabase } from './supabase/SupabaseContext'
@@ -51,6 +53,10 @@ export default function App() {
             {/* Order data */}
             <Route path="/orders" element={<OrderHistory />} />
             <Route path="/orders/:orderId" element={<OrderRecord />} />
+
+            {/* Misc content pages */}
+            <Route path="/philosophy" element={<Philosophy />} />
+            <Route path="/contact" element={<Contact />} />
           </Routes>
         </div>
       </BrowserRouter>

client/src/components/Auth/AuthForm.tsx

@@ -1,6 +1,8 @@
-import { useSupabase } from "../../supabase/SupabaseContext";
 import { FormInput, getSession, handleLogin, handleRegister } from "../../util/authHelpers";
+import { useSupabase } from "../../supabase/SupabaseContext";
 import { AuthFormType } from "../../util/types";
+import { loginHTML, registerHTML } from "./authExtraText";
+
 import { useState } from "react";
 import Button from "../_ui/Button/Button";
 import Page from "../_ui/Page/Page";
@@ -10,12 +12,14 @@ const AuthForm: AuthFormType = ({ format }) => {
     const supabase = useSupabase();
     const formText = format == "login" ? "Login" : "Register";
     const formFunction = format == "login" ? () => handleLogin(supabase, input) : () => handleRegister(supabase, input);
+    const formHTML = format == "login" ? loginHTML : registerHTML;
 
     return (
         <Page>
             <h1>{formText}</h1>
+            {formHTML}
 
-            <form>
+            <form className="auth-form">
                 <div className="form-row">
                     <label htmlFor="auth-form-email">Email:</label>
                     <input id="auth-form-email" required type="text" onChange={(e) => setInput({...input, email: e.target.value})} />

client/src/components/Auth/authExtraText.tsx

@@ -0,0 +1,15 @@
+export const loginHTML = (
+    <>
+    <h2>Welcome back!</h2>
+    <p>It's great to see you again.</p>
+    <p>Please enter your credentials below to login:</p>
+    </>
+)
+
+export const registerHTML = (
+    <>
+    <h2>Hi there!</h2>
+    <p>Thank you so much for your interest in the site!</p>
+    <p>Please use the form below to register.</p>
+    </>
+)

client/src/components/Content/Contact.tsx

@@ -0,0 +1,26 @@
+import Gallery from "../_ui/Gallery/Gallery";
+import Page from "../_ui/Page/Page";
+
+export default function Contact() {
+    return (
+        <Page>
+            <h1>Something you wanted to talk to us about?</h1>
+
+            <p>We'd love to hear it!</p>
+            <p>You can reach me at any of these social media outlets:</p>
+
+            <Gallery additionalClasses="social-gallery" columns={3}>
+                <p>Wew</p>
+                <p>Wew</p>
+                <p>Wew</p>
+            </Gallery>
+
+            <p>You can also use the following form to reach out:</p>
+
+            <form>
+                <label>Things</label>
+                <input></input>
+            </form>
+        </Page>
+    )
+}

client/src/components/Content/Philosophy.tsx

@@ -0,0 +1,12 @@
+import Page from "../_ui/Page/Page";
+
+export default function Philosophy() {
+    return (
+        <Page>
+            <h1>The Express Spices Philosophy</h1>
+
+            <p>Things and stuff and things and stuff and things and stuff and things and stuff and things and stuff and things.</p>
+            <p>Furthermore, things and stuff and things and stuff and things and stuff and things and stuff and things and stuff and things.</p>
+        </Page>
+    )
+}

client/src/components/Product/AllProducts.tsx

@@ -2,13 +2,14 @@ import { useEffect, useState } from "react"
 import { v4 } from "uuid";
 import { getAllProducts } from "../../util/apiUtils";
 import { ProductModel } from "../../util/types";
+import Card from "../_ui/Card/Card";
 import Gallery from "../_ui/Gallery/Gallery";
 import Page from "../_ui/Page/Page";
 import ProductCard from "./ProductCard";
 
 export default function AllProducts() {
     const [productData, setProductData] = useState<ProductModel[]>();
-    const [view, setView] = useState<JSX.Element>(<p>Loading...</p>);
+    const [view, setView] = useState<JSX.Element>(<h1>Loading...</h1>);
 
     useEffect(() => {
         getAllProducts()
@@ -23,7 +24,26 @@ export default function AllProducts() {
     useEffect(() => {
         setView(
             <Page>
-                <h1>All Products!</h1>
+                <h1>Product Catalog</h1>
+                
+                <Card additionalClasses="all-products-filter">
+                    <div>
+                        <p>Filter results by:</p>
+                        <select>
+                            <option>Name (A-Z)</option>
+                            <option>Name (Z-A)</option>
+                            <option>Price (Low to High)</option>
+                            <option>Price (High to Low)</option>
+                        </select>
+                    </div>
+                    <div>
+                        <p>Select by category:</p>
+                    </div>
+                    <div>
+                        <p>Select by region:</p>
+                    </div>
+                </Card>
+
                 <Gallery additionalClasses="product-card-list" columns={3}>
                     {
                         productData && productData.map((data: ProductModel) => {