Create the html and some code for the new recipe page

src/lib/server/models/Recipe.js

@@ -1,24 +1,25 @@
 import mongoose from "mongoose";
 
 const recipeSchema = new mongoose.Schema({
+    user: {
+        type: mongoose.Schema.Types.ObjectId,
+        ref: "users",
+        required: true
+    },
+    name: {
+        type: String,
+        required: true
+    },
     ingredients: [{
-        user: {
-            type: mongoose.Schema.Types.ObjectId,
-            ref: "users"
-        },
-        name: {
-            type: String,
-            required: true
-        },
         quantity: {
             type: Number,
             required: true
         },
-        units: {
+        unit: {
             type: String,
             required: true
         },
-        item: {
+        name: {
             type: String,
             required: true
         }

src/routes/dashboard/+page.svelte

@@ -3,5 +3,6 @@
 </script>
 
 <div>
+    <a href="/recipe/new">New Recipe</a>
     <h1>Recipes</h1>
 </div>

src/routes/recipe/new/+page.svelte

@@ -0,0 +1,94 @@
+<script>
+    import {notify} from "$lib/notifier.svelte.js";
+
+    let nameInput;
+    let name = $state("");
+    let quantity = $state(0);
+    let unit = $state("");
+    let ingredientName = $state("");
+    let ingredients = $state([]);
+    let stepString = $state("");
+    let steps = $state([]);
+    let notes = $state("");
+
+    const submit = (event)=>{
+        event.preventDefault();
+        console.log("submitting");
+    }
+
+    const addIngredient = ()=>{
+        if(quantity <= 0) return notify("error", "Quantity must be greater than 0");
+        if(!unit) return notify("error", "Unit is required");
+        if(!ingredientName) return notify("error", "Ingredient name is required");
+
+        ingredients.push({
+            quantity: quantity,
+            unit: unit,
+            name: ingredientName
+        });
+
+        quantity = 0;
+        unit = "";
+        ingredientName = "";
+    }
+
+    const addStep = ()=>{
+        if(!stepString) return notify("error", "Please enter some text");
+        steps.push(stepString);
+        stepString = "";
+    }
+
+    $effect(()=>{
+        nameInput?.focus();
+    });
+</script>
+
+<div class="container">
+    <form class="standardForm" onsubmit={submit}>
+        <h1>New Recipe</h1>
+
+        <label>Name
+            <input type="text" bind:this={nameInput} bind:value={name}>
+        </label>
+
+        <div class="ingredients">
+            <h2>Ingredients</h2>
+
+            <ul>
+                {#each ingredients as i}
+                    <li>{i.name}, {i.quantity} {i.unit}</li>
+                {/each}
+            </ul>
+
+            <label>Quantity
+                <input type="number" min="0" bind:value={quantity}>
+            </label>
+
+            <label>Unit
+                <input type="text" bind:value={unit}>
+            </label>
+
+            <label>Name
+                <input type="text" bind:value={ingredientName}>
+            </label>
+
+            <button class="button" type="button" onclick={addIngredient}>Add</button>
+        </div>
+
+        <div class="steps">
+            <h2>Steps</h2>
+
+            <ol>
+                {#each steps as s}
+                    <li>{s}</li>
+                {/each}
+            </ol>
+
+            <textarea bind:value={stepString} rows="2"></textarea>
+
+            <button class="button" type="button" onclick={addStep}>Add</button>
+        </div>
+
+        <textarea bind:value={notes} rows="4"></textarea>
+    </form>
+</div>