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">
-            {data.blog.site.freebie_text}
-        </p>
-        <div
-            class="max-w-[400px] whitespace-nowrap flex justify-around mx-auto"
-        >
-            <input
-                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
+        {#if isSubscribed}
+            <p>Thanks for subscribing!</p>
+        {:else}
+            {#if data.blog.site.freebie_text}
+                <p class="text-base/7 mb-8">
+                    {data.blog.site.freebie_text}
+                </p>
+            {/if}
+            <div
+                class="max-w-[400px] whitespace-nowrap flex justify-around mx-auto"
             >
-        </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>