From 56ad5a7868d9b2110cedee9ceab66c22b494a18e Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Fri, 9 Aug 2024 12:33:23 +0200
Subject: [PATCH] Codesandbox[embed]

---
 src/components/Codesandbox.tsx | 39 ++++++++++++++++++++++------------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/components/Codesandbox.tsx b/src/components/Codesandbox.tsx
index f8b35b3d..e470e0b1 100644
--- a/src/components/Codesandbox.tsx
+++ b/src/components/Codesandbox.tsx
@@ -13,6 +13,7 @@ export type CSB = {
 export default function Codesandbox({
   id,
   data,
+  embed = false,
   tags: defaultTags,
   description: defaultDescription,
   title: defaultTitle,
@@ -20,6 +21,7 @@ export default function Codesandbox({
 }: {
   id: string
   data: CSB
+  embed: boolean
   tags?: string[]
   description?: string
   title?: string
@@ -31,19 +33,30 @@ export default function Codesandbox({
 
   return (
     <>
-      <a href={`https://codesandbox.io/s/${id}`} target="_blank" rel="noreferrer">
-        {data?.screenshot_url && (
-          <Image
-            className="rounded shadow-lg"
-            src={data.screenshot_url}
-            placeholder="empty"
-            alt={title}
-            width={1763}
-            height={926}
-            loading="lazy"
-          />
-        )}
-      </a>
+      {embed ? (
+        <iframe
+          src={`https://codesandbox.io/embed/${id}`}
+          className="w-full h-[500px]"
+          title={title}
+          allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+          sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+        ></iframe>
+      ) : (
+        <a href={`https://codesandbox.io/s/${id}`} target="_blank" rel="noreferrer">
+          {data?.screenshot_url && (
+            <Image
+              className="rounded shadow-lg"
+              src={data.screenshot_url}
+              placeholder="empty"
+              alt={title}
+              width={1763}
+              height={926}
+              loading="lazy"
+            />
+          )}
+        </a>
+      )}
+
       {!hideTitle && (
         <>
           <h6 className="text-gray-700 font-bold mt-4">{title}</h6>