rolled back btn

quartz/components/Btn8831.tsx

@@ -3,10 +3,11 @@ import baseStyle from "./styles/footer.scss"
 import { useEffect, useState } from "preact/hooks"
 
 // Import the JSON data
-import buttonsData from "./buttons.json"
+import buttonsData from "../buttons.json"
 
-// Define the component
-const Btn8831: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
+export default (() => {
+  // Define the component
+  const Btn8831: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
     // Since the data is static, you can directly use buttonsData
     const [buttons, setButtons] = useState(buttonsData)
 
@@ -26,17 +27,15 @@ const Btn8831: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) =
         ))}
       </div>
     )
-}
+  }
 
-// Define custom styles
-const customStyle = `
+  // Define custom styles
+  const customStyle = `
     .btn8831-container {
       display: flex;
       flex-wrap: wrap;
       max-width: 60%;
       margin: 0 auto;
-    opacity: 1;
-    justify-content: center;
     }
     .btn8831-container a {
       margin: 5px;
@@ -45,10 +44,10 @@ const customStyle = `
       width: 88px;
       height: 31px;
     }
-`
+  `
 
-// Combine base styles with custom styles
-Btn8831.css = customStyle
+  // Combine base styles with custom styles
+  Btn8831.css = baseStyle + customStyle
 
-
-export default (() =>  Btn8831) satisfies QuartzComponentConstructor
+  return Btn8831
+})() satisfies QuartzComponentConstructor