add fetch

packages/builder/src/components/start/AppCard.svelte

@@ -2,6 +2,8 @@
   import Button from "components/common/Button.svelte"
   export let name, description =`A minimalist CRM which removes the noise and allows you to focus
               on your business.`, _id;
+              
+  
 </script>
 
 <div class="apps-card">
@@ -31,8 +33,8 @@
     background-color: var(--grey-light);
     text-decoration: none;
   }
-          
+  
-                .app-title {
+  .app-title {
     font-size: 18px;
     font-weight: 700;
     color: var(--ink);

packages/builder/src/components/start/AppList.svelte

@@ -26,8 +26,9 @@
 <style>
   .apps {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(400, 1fr));
+    grid-template-columns: repeat(auto-fill, 400px);
-    gap: 85px;
+    grid-gap: 40px 85px;
+    justify-content: start;
   }
   .root {
     margin: 40px 80px;

packages/builder/src/components/start/CreateAppModal.svelte

@@ -6,6 +6,27 @@
   export let onOkay = () => {}
 
   const { close } = getContext("simple-modal")
+  
+  let name = ""
+  let description = ""
+  
+  const createNewApp = async () => {
+    const data = { name, description}    
+    
+    try {
+      const response = await fetch('/api/applications', {
+        method: 'POST', // *GET, POST, PUT, DELETE, etc.
+        credentials: 'same-origin', // include, *same-origin, omit
+        headers: {
+          'Content-Type': 'application/json'
+          // 'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: JSON.stringify(data) // body data type must match "Content-Type" header
+      });
+    } catch (error) {
+      
+    }
+  }
 
   let value
   let onChange = () => {}
@@ -15,12 +36,10 @@
     close()
   }
 
-  function _onOkay() {
+  async function _onOkay() {
-    onOkay(value)
+    await createNewApp()
     close()
   }
-
-  $: onChange(value)
 </script>
 
 <div class="container">
@@ -29,8 +48,9 @@
       <span class="icon"><AppsIcon /></span>
       <h3>Create new web app</h3>
     </div>
-    <Input name="name" label="Name" placeholder="Enter application name" />
+    <Input name="name" label="Name" placeholder="Enter application name" on:change={(e) => name = e.target.value} on:input={(e) => name = e.target.value} />
     <TextArea
+      bind:value={description}
       name="description"
       label="Description"
       placeholder="Describe your application" />

packages/builder/src/pages/[application]/_reset.svelte

@@ -20,6 +20,7 @@
       await store.setPackage(pkg)
       return pkg
     } else {
+      console.log(pkg)
       throw new Error(pkg)
     }
   }