From 438948cab5313592b031c1dacfe4c769afe9821d Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Sun, 6 Oct 2024 19:44:40 +0200
Subject: [PATCH] links

---
 apps/website/app/demos/[demoname]/Social.tsx | 120 +++++++++++++++++++
 apps/website/app/demos/[demoname]/layout.tsx |  10 +-
 apps/website/app/demos/[demoname]/page.tsx   |  33 ++++-
 apps/website/package.json                    |   1 +
 package-lock.json                            |  10 ++
 5 files changed, 164 insertions(+), 10 deletions(-)
 create mode 100644 apps/website/app/demos/[demoname]/Social.tsx

diff --git a/apps/website/app/demos/[demoname]/Social.tsx b/apps/website/app/demos/[demoname]/Social.tsx
new file mode 100644
index 00000000..62b1d3a5
--- /dev/null
+++ b/apps/website/app/demos/[demoname]/Social.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { Style } from "@/components/Style";
+import { useEffect, useState } from "react";
+import { GoCommandPalette } from "react-icons/go";
+import { RxOpenInNewWindow } from "react-icons/rx";
+import { SiCodesandbox, SiGithub, SiStackblitz } from "react-icons/si";
+
+export function Social({
+  demoname,
+  embed_url,
+}: {
+  demoname: string;
+  embed_url: string;
+}) {
+  const [copied, setCopied] = useState(false);
+
+  const handleClick = async () => {
+    await navigator.clipboard.writeText(
+      `npx -y degit pmndrs/examples/demos/${demoname}`
+    );
+    setCopied(true);
+  };
+
+  useEffect(() => {
+    if (!copied) return;
+    const int = setTimeout(() => setCopied(false), 2000);
+    return () => clearTimeout(int);
+  }, [copied]);
+
+  return (
+    <nav className="Social">
+      <Style
+        css={`
+          @scope {
+            & {
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              gap: 0.5em;
+              @media (min-aspect-ratio: 1/1) {
+                gap: 0.75em;
+              }
+
+              color: #333;
+            }
+
+            a svg {
+              width: 1.25em;
+              @media (min-aspect-ratio: 1/1) {
+                width: 1.5em;
+              }
+              aspect-ratio: 1;
+            }
+
+            a {
+              position: relative;
+              > span {
+                position: absolute;
+                right: 100%;
+                margin-inline-end: 0.75em;
+                top: 50%;
+                transform: translateY(-50%);
+                white-space: nowrap;
+                font-size: 80%;
+              }
+
+              > span {
+                opacity: 0;
+                transform: translate(-0.5em, -50%);
+                transition-property: opacity transform;
+                transition-duration: 0.2s;
+              }
+              @media (hover: hover) {
+                &:hover > span {
+                  opacity: 1;
+                  transform: translate(0rem, -50%);
+                }
+              }
+            }
+          }
+        `}
+      />
+
+      <a target="_blank" rel="noopener noreferrer" href={embed_url}>
+        <RxOpenInNewWindow />
+
+        <span>fullpage</span>
+      </a>
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href={`https://github.com/pmndrs/examples/tree/main/demos/${demoname}`}
+      >
+        <SiGithub />
+        <span>code</span>
+      </a>
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href={`https://stackblitz.com/github/pmndrs/examples/tree/main/demos/${demoname}`}
+      >
+        <SiStackblitz />
+        <span>stackblitz</span>
+      </a>
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href={`https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/${demoname}`}
+      >
+        <SiCodesandbox />
+        <span>codesandbox</span>
+      </a>
+      <a href="javascript:void(0);" onClick={handleClick}>
+        <GoCommandPalette />
+        <span>{copied ? "copied command!" : "degit"}</span>
+      </a>
+    </nav>
+  );
+}
diff --git a/apps/website/app/demos/[demoname]/layout.tsx b/apps/website/app/demos/[demoname]/layout.tsx
index 88781435..01d1ae6d 100644
--- a/apps/website/app/demos/[demoname]/layout.tsx
+++ b/apps/website/app/demos/[demoname]/layout.tsx
@@ -22,18 +22,10 @@ export default function Layout({
               display: flex;
               align-items: center;
               justify-content: center;
-              > .Dev {
+              > * {
                 max-width: 100%;
               }
             }
-
-            .Dev {
-              padding-inline: 1rem;
-            }
-            iframe {
-              width: 100%;
-              min-height: 100dvh;
-            }
           }
         `}
       />
diff --git a/apps/website/app/demos/[demoname]/page.tsx b/apps/website/app/demos/[demoname]/page.tsx
index 20fcb452..6b64f964 100644
--- a/apps/website/app/demos/[demoname]/page.tsx
+++ b/apps/website/app/demos/[demoname]/page.tsx
@@ -2,6 +2,9 @@ import { notFound } from "next/navigation";
 
 import { getDemos } from "@/lib/helper";
 import { Dev } from "./Dev";
+import { Style } from "@/components/Style";
+
+import { Social } from "./Social";
 
 const demos = getDemos();
 
@@ -70,10 +73,38 @@ export default async function Page(props: Props) {
 
   return (
     <>
+      <Style
+        css={`
+          @scope {
+            .Dev {
+              padding-inline: 1rem;
+            }
+            iframe {
+              width: 100%;
+              min-height: 100dvh;
+            }
+            .Social {
+              position: fixed;
+              right: 0;
+              top: 0;
+              bottom: 0;
+              margin-inline-end: 0.5rem;
+              @media (min-aspect-ratio: 1/1) {
+                margin-inline-end: 1.25rem;
+              }
+            }
+          }
+        `}
+      />
+
       {isDev && !isUp ? (
         <Dev demoname={demoname} />
       ) : (
-        <iframe src={embed_url} />
+        <>
+          <iframe src={embed_url} />
+
+          <Social demoname={demoname} embed_url={embed_url} />
+        </>
       )}
     </>
   );
diff --git a/apps/website/package.json b/apps/website/package.json
index 4b8578ba..1a270bd8 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -173,6 +173,7 @@
     "open-props": "^1.7.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "react-use": "^17.5.1"
   },
   "devDependencies": {
diff --git a/package-lock.json b/package-lock.json
index 65ea3287..1bf9a7a7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -187,6 +187,7 @@
         "open-props": "^1.7.5",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-icons": "^5.3.0",
         "react-use": "^17.5.1"
       },
       "devDependencies": {
@@ -209,6 +210,15 @@
         "undici-types": "~5.26.4"
       }
     },
+    "apps/website/node_modules/react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "demos/aquarium": {
       "name": "@demo/aquarium",
       "version": "1.0.0",