Add db and ItemBoxEdit

src/lib/components/ItemBoxEdit.svelte

@@ -2,8 +2,6 @@
   import { Checkbox } from "flowbite-svelte";
 
   export let name = "Default",
-    amount = 0,
-    exp = 0,
     image = "/Image.svg",
     isWantCheck = true;
 </script>
@@ -23,12 +21,6 @@
     />
     <div class="flex flex-col pl-4">
       <h1 class="text-black text-base font-normal">{name}</h1>
-      <div class="text-black text-xs font-normal">
-        Expired in {exp} days
-      </div>
-      <div class="text-neutral-600 text-xs font-normal">
-        Amount : {amount} unit
-      </div>
     </div>
   </div>
 </div>

src/lib/server/db.ts

@@ -1,5 +1,5 @@
 import PocketBase from 'pocketbase';
 
-const pb = new PocketBase('http://127.0.0.1:8090');
+const pb = new PocketBase('https://sustain-app.pockethost.io');
 
 export default pb;

src/routes/fridge/add/+page.server.ts

@@ -1,21 +1,31 @@
 import type { PageServerLoad } from './$types';
+import pb from '$lib/server/db';
 
 export const load = (async ({ url }) => {
     const query = url.searchParams.get('search');
-    const items = [
-        { name: "Pork", amount: 3, exp: 7, imgID: "/image/item/pork.png" },
-        { name: "Chicken", amount: 2, exp: 6, imgID: "/image/item/chicken.png" },
-        { name: "Beef", amount: 3, exp: 7, imgID: "/image/item/beef.png" },
-        { name: "Frog", amount: 3, exp: 7, imgID: "/image/item/frog.png" },
-        { name: "Salmon", amount: 3, exp: 7, imgID: "/image/item/salmon.png" },
-        { name: "Carrot", amount: 2, exp: 4, imgID: "/image/item/carrot.png" },
-        { name: "Broccoli", amount: 4, exp: 6, imgID: "/image/item/broccoli.png" },
-        { name: "Potato", amount: 6, exp: 7, imgID: "/image/item/potato.png" },
-        { name: "Milk", amount: 1, exp: 7, imgID: "/image/item/milk.png" },
-        { name: "Cheese", amount: 4, exp: 7, imgID: "/image/item/cheese.png" },
-        { name: "Yoghurt", amount: 2, exp: 7, imgID: "/image/item/yoghurt.png" },
-    ]
+    let filter = {};
+    if (query) {
+        filter = {
+            filter: `name ~ "%${query}%"`,
+        }
+    }
+    const records = structuredClone(await pb.collection('ingredients').getFullList(filter));
+
+    // console.log(records)
+    // const items = [
+    //     { name: "Pork", amount: 3, exp: 7, imgID: "/image/item/pork.png" },
+    //     { name: "Chicken", amount: 2, exp: 6, imgID: "/image/item/chicken.png" },
+    //     { name: "Beef", amount: 3, exp: 7, imgID: "/image/item/beef.png" },
+    //     { name: "Frog", amount: 3, exp: 7, imgID: "/image/item/frog.png" },
+    //     { name: "Salmon", amount: 3, exp: 7, imgID: "/image/item/salmon.png" },
+    //     { name: "Carrot", amount: 2, exp: 4, imgID: "/image/item/carrot.png" },
+    //     { name: "Broccoli", amount: 4, exp: 6, imgID: "/image/item/broccoli.png" },
+    //     { name: "Potato", amount: 6, exp: 7, imgID: "/image/item/potato.png" },
+    //     { name: "Milk", amount: 1, exp: 7, imgID: "/image/item/milk.png" },
+    //     { name: "Cheese", amount: 4, exp: 7, imgID: "/image/item/cheese.png" },
+    //     { name: "Yoghurt", amount: 2, exp: 7, imgID: "/image/item/yoghurt.png" },
+    // ]
     return {
-        items: items.filter(item => item.name.toLowerCase().includes(query?.toLowerCase() ?? '')),
+        items: records,
     };
 }) satisfies PageServerLoad;

src/routes/fridge/add/+page.svelte

@@ -58,26 +58,20 @@
   </div>
   <div class="grow">
     <div class="w-full">
-      <div class="bg-gray-300 py-1 px-4">Meat</div>
-      <ItemBoxEdit />
-    </div>
-    <div class="w-full">
-      <div class="bg-gray-300 py-1 px-4">Vegetable</div>
-      <ItemBoxEdit />
-    </div>
-    <div class="w-full">
-      <div class="bg-gray-300 py-1 px-4">Dairy</div>
-      <ItemBoxEdit />
+      {#each data.items as item}
+        <ItemBoxEdit name={item.name} />
+      {/each}
     </div>
   </div>
-  <button
-    type="button"
-    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 mx-4 focus:ring-blue-300 font-medium rounded-lg text-xl px-5 py-2.5 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
-    on:click={() => (hidden8 = false)}
-  >
-    Next
-  </button>
 </div>
+<button
+  type="button"
+  class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 mx-4 focus:ring-blue-300 font-medium rounded-lg text-xl px-5 py-2.5 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
+  on:click={() => (hidden8 = false)}
+>
+  Next
+</button>
+
 <Drawer
   placement="bottom"
   width="w-full"