From 1528d8c984e38723a8f3ffe9fb14109220e14746 Mon Sep 17 00:00:00 2001
From: Ulysia <ulysia@proton.me>
Date: Mon, 14 Oct 2024 08:49:37 +0200
Subject: [PATCH] added buttons

---
 quartz/components/Btn8831.tsx      | 53 ++++++++++++++++++++++++++++++
 quartz/components/CustomFooter.tsx |  2 ++
 quartz/components/buttons.json     |  7 ++++
 tsconfig.json                      |  2 +-
 4 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 quartz/components/Btn8831.tsx
 create mode 100644 quartz/components/buttons.json

diff --git a/quartz/components/Btn8831.tsx b/quartz/components/Btn8831.tsx
new file mode 100644
index 0000000..932b90a
--- /dev/null
+++ b/quartz/components/Btn8831.tsx
@@ -0,0 +1,53 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import baseStyle from "./styles/footer.scss"
+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)
+
+    // 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>
+    )
+  }
+
+  // Define custom styles
+  const customStyle = `
+    .btn8831-container {
+      display: flex;
+      flex-wrap: wrap;
+      max-width: 60%;
+      margin: 0 auto;
+    }
+    .btn8831-container a {
+      margin: 5px;
+    }
+    .btn8831-container img {
+      width: 88px;
+      height: 31px;
+    }
+  `
+
+  // Combine base styles with custom styles
+  Btn8831.css = baseStyle + customStyle
+
+  return Btn8831
+})() satisfies QuartzComponentConstructor
diff --git a/quartz/components/CustomFooter.tsx b/quartz/components/CustomFooter.tsx
index 7e331f2..e0b73fa 100644
--- a/quartz/components/CustomFooter.tsx
+++ b/quartz/components/CustomFooter.tsx
@@ -1,6 +1,7 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/footer.scss"
 import FooterLinksConstructor from "./Footer_links"
+import Btn8831 from "./Btn8831"
 
 interface Options {
   links: Record<string, string>
@@ -14,6 +15,7 @@ export default ((opts?: Options) => {
     return (
       <footer class={`${displayClass ?? ""}`}>
         <FooterLinks displayClass={displayClass} cfg={cfg} />
+        <Btn8831 displayClass={displayClass} cfg={cfg} />
       </footer>
     )
   }
diff --git a/quartz/components/buttons.json b/quartz/components/buttons.json
new file mode 100644
index 0000000..b4cb38e
--- /dev/null
+++ b/quartz/components/buttons.json
@@ -0,0 +1,7 @@
+[
+  {
+    "image": "https://assets.derg.cz/buttons/theysosmall_by_liah.png",
+    "url": "https://smolderg.xyz",
+    "alt": "&quot;They so small!&quot; in large letters accompanied by an arrow pointing at a tiny dragon in the corner of the image, surrounded by the smaller bits of text &quot;Wow!&quot; &quot;Look!&quot; and &quot;Pet them!&quot;"
+  }
+]
diff --git a/tsconfig.json b/tsconfig.json
index fd8c8cd..96a134b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,7 +14,7 @@
     "esModuleInterop": true,
     "jsx": "react-jsx",
     "jsxImportSource": "preact",
-    "types": ["preact"]  // Add this line
+    "types": ["preact"] // Add this line
   },
   "include": ["**/*.ts", "**/*.tsx", "./package.json"],
   "exclude": ["build/**/*.d.ts"],