Codesandbox[embed]

pmndrs · Aug 9, 2024 · eeffd78 · eeffd78
1 parent 7f8f33e
commit eeffd78
Showing 1 changed file with 26 additions and 13 deletions.
diff --git a/src/components/Codesandbox.tsx b/src/components/Codesandbox.tsx
@@ -13,13 +13,15 @@ export type CSB = {
 export default function Codesandbox({
   id,
   data,
+  embed = false,
   tags: defaultTags,
   description: defaultDescription,
   title: defaultTitle,
   hideTitle = false,
 }: {
   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"
+        />
+      ) : (
+        <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>