Refactor YouTube component to use ChakraUI

Colt-M1873 · Sep 6, 2022 · f0ec932 · f0ec932
1 parent 5cbb890
commit f0ec932
Showing 1 changed file with 3 additions and 8 deletions.
diff --git a/src/components/YouTube.tsx b/src/components/YouTube.tsx
@@ -1,10 +1,5 @@
 import React from "react"
-import styled from "@emotion/styled"
-
-const Figure = styled.figure`
-  display: block;
-  margin: 1rem 0;
-`
+import { Box } from "@chakra-ui/react"
 
 /**
  * @param {id} ID of the YouTube video
@@ -27,7 +22,7 @@ const YouTube: React.FC<IProps> = ({ id, start = "0", title = "YouTube" }) => {
   const baseUrl = "https://www.youtube.com/embed/"
   const src = baseUrl + id + startQuery
   return (
-    <Figure>
+    <Box as="figure" display="block" marginY="1rem">
       <iframe
         width="100%"
         height="315"
@@ -43,7 +38,7 @@ const YouTube: React.FC<IProps> = ({ id, start = "0", title = "YouTube" }) => {
       picture-in-picture"
         allowFullScreen
       ></iframe>
-    </Figure>
+    </Box>
   )
 }