subscribe

src/routes/+layout.svelte

@@ -1,6 +1,13 @@
 <script>
+    import { browser } from "$app/environment";
     import "../app.css";
     export let data;
+
+    let isSubscribed = false;
+
+    function saveSubscribed() {
+        isSubscribed = true;
+    }
 </script>
 
 <div
@@ -23,27 +30,36 @@
 <div class="bg-white py-16 text-center" id="subscribe-form">
     <div class="max-w-lg mx-auto">
         <h3 class="text-3xl font-bold mb-3">Our newsletter</h3>
-        <p class="text-base/7 mb-8">
+        {#if isSubscribed}
-            {data.blog.site.freebie_text}
+            <p>Thanks for subscribing!</p>
-        </p>
+        {:else}
-        <div
+            {#if data.blog.site.freebie_text}
-            class="max-w-[400px] whitespace-nowrap flex justify-around mx-auto"
+                <p class="text-base/7 mb-8">
-        >
+                    {data.blog.site.freebie_text}
-            <input
+                </p>
-                type="text"
+            {/if}
-                placeholder="Email address"
+            <div
-                class="py-3 px-5 flex-grow border-l border-y border-solid border-gray-300 h-[50px] rounded-l-lg"
+                class="max-w-[400px] whitespace-nowrap flex justify-around mx-auto"
-            />
-            <button
-                class="px-8 py-3 bg-gray-900 text-white font-semibold rounded-r-lg h-[50px]"
-                >Subscribe</button
             >
-        </div>
+                <form method="post" on:submit={saveSubscribed}>
+                    <input
+                        name="email"
+                        id="email"
+                        type="text"
+                        placeholder="Email address"
+                        class="py-3 px-5 flex-grow border-l border-y border-solid border-gray-300 h-[50px] rounded-l-lg"
+                    />
+                    <button
+                        class="px-8 py-3 bg-gray-900 text-white font-semibold rounded-r-lg h-[50px]"
+                        >Subscribe</button
+                    >
+                </form>
+            </div>
+        {/if}
     </div>
 </div>
 <div class="h-24 flex items-center justify-center border-t border-gray-200">
     <span>Copyright {new Date().getFullYear()} - Omer Sabic</span>
 </div>
 
-
 <style></style>

src/routes/+page.server.js

@@ -0,0 +1,18 @@
+import { env } from '$lib';
+
+/** @type {import('./$types').Actions} */
+export const actions = {
+	default: async (event) => {
+        const body = await event.request.formData();
+        const email = body.get("email");
+        // let res = await event.fetch(env.api_url + "/blog/signup", {
+        //     method: "post",
+        //     body: JSON.stringify({
+        //         email,
+                
+        //     })
+        // });
+        console.log("env", env.sites_url);
+        console.log("id", event.request.url.replace(env.sites_url, ""))
+	}
+};