feat: Improve IPFS demo in Home component

- Added a button to toggle the visibility of the IPFS demo.
- Improved the layout and styling of the IPFS demo section.
- Removed unnecessary alert in IPFS upload functionality.
- Updated button component to correctly handle click events.

sweb/src/components/Home.svelte

@@ -10,36 +10,28 @@
 
     // Flag to show IPFS demo
     let showIPFSDemo = false;
+
+    function handleDemoButtonClick() {
+        console.log("Hello");
+        showIPFSDemo = !showIPFSDemo;
+    }
 </script>
 
 <div class="">
-    {#if contentPath}
-        <div
-            class="bg-background-secondary shadow-sm p-4 sm:p-6 overflow-x-auto"
-        >
-            <MarkdownContent path={actualPath} />
-        </div>
-    {:else}
-        <!-- IPFS Demo Section -->
-        <section class="mb-12 sm:mb-16 md:mb-20">
     <div class="text-center mb-8 sm:mb-12">
-                <h2
+        <h2 class="text-2xl sm:text-3xl font-bold mb-3 sm:mb-4 text-text">
-                    class="text-2xl sm:text-3xl font-bold mb-3 sm:mb-4 text-text"
-                >
             IPFS Integration
         </h2>
-                <p
+        <p class="text-lg sm:text-xl text-text-secondary max-w-3xl mx-auto">
-                    class="text-lg sm:text-xl text-text-secondary max-w-3xl mx-auto"
+            Experience the power of decentralized content storage and retrieval
-                >
+            with IPFS.
-                    Experience the power of decentralized content storage and
-                    retrieval with IPFS.
         </p>
 
         <div class="mt-6">
             <Button
                 variant="primary"
                 size="lg"
-                        on:click={() => (showIPFSDemo = !showIPFSDemo)}
+                on:click={handleDemoButtonClick}
             >
                 {showIPFSDemo ? "Hide IPFS Demo" : "Show IPFS Demo"}
             </Button>
@@ -47,8 +39,14 @@
     </div>
 
     {#if showIPFSDemo}
+        <section class="mb-12 sm:mb-16 md:mb-20">
             <IPFSDemo />
-            {/if}
         </section>
+    {:else if contentPath && contentPath.trim() !== ""}
+        <div
+            class="bg-background-secondary shadow-sm p-4 sm:p-6 overflow-x-auto"
+        >
+            <MarkdownContent path={actualPath} />
+        </div>
     {/if}
 </div>

sweb/src/components/IPFSDemo.svelte

@@ -87,7 +87,6 @@
                 variant="primary"
                 on:click={() => {
                     console.log("Upload button clicked directly");
-                    alert("Upload button clicked!");
                     uploadContent();
                 }}
                 disabled={uploading || !content.trim()}

sweb/src/lib/components/ui/button/button.svelte

@@ -1,11 +1,11 @@
+<!-- button.svelte -->
 <script lang="ts">
   import { cn } from "../../../utils";
 
   export let variant: "primary" | "secondary" | "ghost" = "primary";
   export let size: "default" | "sm" | "lg" | "icon" = "default";
-
   let className: string | undefined | null = undefined;
-  export { className as class };
+  export { className };
 
   const sizeClasses = {
     default: "h-10 px-4 py-2",
@@ -26,6 +26,7 @@
     sizeClasses[size],
     className,
   )}
+  on:click
   {...$$restProps}
 >
   <slot />