feat: 🎸 share btn

add x share button

Author: nk4dev

src/components/AnimatedContent/shrebtn.tsx

@@ -0,0 +1,27 @@
+import { css } from "../../../styled-system/css";
+
+export default function ShareButton() {
+    const handleShareX = () => {
+        const url = window.location.href + "?utm_source=share_btn&utm_medium=x_post_link";
+        const text = document.title || 'Check this out';
+        const shareUrl = `https://x.com/intent/post?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`;
+        window.open(shareUrl, '_blank', 'noopener,noreferrer');
+    }
+  return (
+    <button className={css({
+      background: "transparent",
+      border: "1px solid #f0d0ff",
+      color: "#f0d0ff",
+      cursor: "pointer",
+      padding: "10px 20px",
+      textDecoration: "underline",
+      "&:hover": {
+        background: "#f0d0ff",
+        color: "#050021",
+        textDecoration: "none",
+      },
+    })} onClick={handleShareX}>
+      Share on X
+    </button>
+  );
+}

src/layout/main.tsx

@@ -1,6 +1,7 @@
 import { css } from "../../styled-system/css";
 import Link from "next/link";
 import ClickSpark from "../components/ClickSpark/ClickSpark";
+import ShareButton from "../components/AnimatedContent/shrebtn";
 
 export default function Layout({ children }) {
   return (
@@ -64,7 +65,7 @@ export default function Layout({ children }) {
           >
             Apps
           </Link>
-          
+
           <Link
             href={"/videos"}
             className={css({
@@ -90,6 +91,13 @@ export default function Layout({ children }) {
               background: "#000",
             })}
           >
+
+            <div className={css({ marginBottom: "20px" })}>
+              <p>Share this page:</p>
+              <div className={css({ display: "flex", justifyContent: "center" })}>
+                <ShareButton />
+              </div>
+            </div>
             <div>(c) Nknight AMAMIYA 2021</div>
             <Link
               href={"https://varius.technology/"}
@@ -112,7 +120,7 @@ export default function Layout({ children }) {
             >
               nknighta.me
             </Link>
-            
+
             <Link
               href={"/llmassets"}
               className={css({