fix: svg

Author: whes1015

src/components/SvgDisplay/index.tsx

@@ -1,4 +1,4 @@
-import { JSX, useEffect, useRef, useState } from "react";
+import { JSX, useEffect, useRef } from "react";
 import styles from "./styles.module.css";
 
 type SvgDisplayProps = {

src/components/SvgDisplay/styles.module.css

@@ -1,13 +1,16 @@
 .svgDisplay {
-  margin: 2rem 0;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
   border-radius: 12px;
   overflow: hidden;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
   transition: box-shadow 0.3s;
 }
 
 .svgDisplay:hover {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 
 .darkMode {
@@ -16,7 +19,11 @@
 
 .header {
   padding: 1.25rem;
-  background: linear-gradient(135deg, var(--ifm-color-primary-lighter) 0%, var(--ifm-color-primary-light) 100%);
+  background: linear-gradient(
+    135deg,
+    var(--ifm-color-primary-lighter) 0%,
+    var(--ifm-color-primary-light) 100%
+  );
   color: white;
 }
 
@@ -42,11 +49,11 @@
   .header {
     padding: 1rem;
   }
-  
+
   .title {
     font-size: 1.125rem;
   }
-  
+
   .description {
     font-size: 0.875rem;
   }
@@ -93,7 +100,8 @@
   background: white;
   border-radius: 8px;
   padding: 0.5rem;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
   z-index: 10;
 }
 
@@ -145,7 +153,7 @@
   .controlButton {
     padding: 0.375rem;
   }
-  
+
   .controlButton svg {
     width: 16px;
     height: 16px;
@@ -308,9 +316,9 @@
     padding: 0.5rem 1rem;
     gap: 0.5rem;
   }
-  
+
   .fullscreenControls button {
     padding: 0.375rem 0.75rem;
     font-size: 0.875rem;
   }
-}
+}