From 0540dd89a0d7dd79b723406ae496d2ece7e75497 Mon Sep 17 00:00:00 2001
From: Ulysia <ulysia@proton.me>
Date: Mon, 14 Oct 2024 09:08:15 +0200
Subject: [PATCH] changed btns?

---
 quartz/components/Btn8831.tsx | 83 +++++++++++++++++------------------
 1 file changed, 41 insertions(+), 42 deletions(-)

diff --git a/quartz/components/Btn8831.tsx b/quartz/components/Btn8831.tsx
index 74f8b1c..aad14ab 100644
--- a/quartz/components/Btn8831.tsx
+++ b/quartz/components/Btn8831.tsx
@@ -5,51 +5,50 @@ import { useEffect, useState } from "preact/hooks"
 // Import the JSON data
 import buttonsData from "./buttons.json"
 
-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)
+// Define the component
+const Btn8831: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
+  // Since the data is static, you can directly use buttonsData
+  const [buttons, setButtons] = useState(buttonsData)
 
-    // Optional: If you need to perform any data manipulation or sorting, you can do it here
-    // For example, if buttonsData isn't sorted, but you need to sort it:
-    // useEffect(() => {
-    //   const sortedButtons = [...buttonsData].sort(/* your sorting function */);
-    //   setButtons(sortedButtons);
-    // }, []);
+  // Optional: If you need to perform any data manipulation or sorting, you can do it here
+  // For example, if buttonsData isn't sorted, but you need to sort it:
+  // useEffect(() => {
+  //   const sortedButtons = [...buttonsData].sort(/* your sorting function */);
+  //   setButtons(sortedButtons);
+  // }, []);
 
-    return (
-      <div class={`btn8831-container ${displayClass ?? ""}`}>
-        {buttons.map((button, index) => (
-          <a href={button.url} key={index}>
-            <img src={button.image} alt={button.alt} />
-          </a>
-        ))}
-      </div>
-    )
+  return (
+    <div class={`btn8831-container ${displayClass ?? ""}`}>
+      {buttons.map((button, index) => (
+        <a href={button.url} key={index}>
+          <img src={button.image} alt={button.alt} />
+        </a>
+      ))}
+    </div>
+  )
+}
+
+// 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;
+  }
+  .btn8831-container img {
+    width: 88px;
+    height: 31px;
+  }
+`
 
-  // 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;
-    }
-    .btn8831-container img {
-      width: 88px;
-      height: 31px;
-    }
-  `
+// Combine base styles with custom styles
+Btn8831.css = customStyle
 
-  // Combine base styles with custom styles
-  Btn8831.css = customStyle
 
-  return Btn8831
-})() satisfies QuartzComponentConstructor
+export default (() =>  Btn8831) satisfies QuartzComponentConstructor