add margin top/bottom to the iframe of spearkerdeck

fohte · May 23, 2024 · 63ca3e9 · 63ca3e9
1 parent db16f91
commit 63ca3e9
Showing 1 changed file with 20 additions and 17 deletions.
diff --git a/src/components/mdx/SpeakerDeck.tsx b/src/components/mdx/SpeakerDeck.tsx
@@ -1,27 +1,30 @@
 'use client'
 
+import { Box } from '@chakra-ui/react'
 import * as React from 'react'
 
 type SpeakerDeckProps = {
   id: string
 }
 
 export const SpeakerDeck: React.FC<SpeakerDeckProps> = ({ id }) => (
-  <iframe
-    className="speakerdeck-iframe"
-    src={`https://speakerdeck.com/player/${id}`}
-    allowFullScreen
-    style={{
-      border: '0px',
-      background: 'padding-box padding-box rgba(0, 0, 0, 0.1)',
-      margin: '0px',
-      padding: '0px',
-      borderRadius: '6px',
-      boxShadow: 'rgba(0, 0, 0, 0.2) 0px 5px 40px',
-      width: '100%',
-      height: 'auto',
-      aspectRatio: '560 / 315',
-    }}
-    data-ratio="1.7777777777777777"
-  />
+  <Box my={8}>
+    <iframe
+      className="speakerdeck-iframe"
+      src={`https://speakerdeck.com/player/${id}`}
+      allowFullScreen
+      style={{
+        border: '0px',
+        background: 'padding-box padding-box rgba(0, 0, 0, 0.1)',
+        margin: '0px',
+        padding: '0px',
+        borderRadius: '6px',
+        boxShadow: 'rgba(0, 0, 0, 0.2) 0px 5px 40px',
+        width: '100%',
+        height: 'auto',
+        aspectRatio: '560 / 315',
+      }}
+      data-ratio="1.7777777777777777"
+    />
+  </Box>
 )