src/pages/recipe/new.astro

@@ -0,0 +1,63 @@
+---
+import client from "@/data/pocketbase";
+import SiteLayout from "@/layouts/base";
+import ImageCarousel from "@/components/Detail/ImageCarousel";
+import IngredientTableView from "@/components/Detail/IngredientTableView";
+import StepView from "@/components/Detail/StepView";
+import InfoView from "@/components/Detail/InfoView";
+
+const { recipeid } = Astro.params;
+
+---
+
+<script>
+
+</script>
+
+<SiteLayout>
+    <div class="flex flex-col md:flex-row">
+        <div class="flex flex-1/3 flex-col mt-2 md:mt-4 sticky">
+            <div class="w-full bg-green-600 h-50">
+                Image Upload
+            </div>
+            <!-- <ImageCarousel class="w-full" recipe={re} /> -->
+            <!-- <p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p> -->
+
+            <!-- Details -->
+            <!-- <InfoView re={re} /> -->
+
+            <p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
+            <table class={`table-auto text-left bg-[#2a2b2c] md:w-80 px-4 rounded-lg w-full`}>
+                <thead>
+                    <tr>
+                        <th class="px-4 py-2">Quantity</th>
+                        <th class="px-4 py-2">Unit</th>
+                        <th class="px-4 py-2">Ingredient</th>
+                    </tr>
+                </thead>
+                <tbody id="ingredient-table" class="border-t px-4 py-2 border-gray-600">
+                    <tr id="ingredient-input" class="">
+                        <td class="px-4 py-1">˚
+                            <input class="w-3/4 bg-white/20 rounded-lg px-2" type="text">
+                        </td>
+                        <td class="px-4 py-1">
+                            <input class="w-3/4 bg-white/20 rounded-lg px-2" type="text">
+                        </td>
+                        <td class="px-4 py-1">
+                            <!-- <input class="w-3/4 text-wrap bg-white/20 rounded-lg px-2" type="text"> -->
+                             <textarea class="block  bg-white/20 rounded-lg px-2"></textarea>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        
+        <div class="flex w-full flex-col">
+            <!-- <p class="hidden md:block text-[28pt] font-bold pl-5">{re.name}</p> -->
+
+            <!-- Steps -->
+            <!-- <StepView steps={steps} /> -->
+        </div>
+
+    </div>
+</SiteLayout>