added button groups

quartz/components/Btn8831.tsx

@@ -1,6 +1,5 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/buttons8831.scss"
-import { useEffect, useState } from "preact/hooks"
 
 // Import the JSON data
 import buttonsData from "./buttons.json"
@@ -8,28 +7,66 @@ 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)
+    // Group buttons by type
+    const groupedButtons = groupButtonsByType(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);
-    // }, []);
+    // Define the order of types
+    const typeOrder = ["misc", "friend", "standard"]
 
     return (
       <div class={`btn8831-container ${displayClass ?? ""}`}>
-        {buttons.map((button, index) => (
-          <a href={button.url} key={index}>
+        {typeOrder.map((type, index) => {
+          const buttons = groupedButtons[type]
+          if (buttons && buttons.length > 0) {
+            return (
+              <div key={type}>
+                {/* Render buttons of the current type */}
+                <div class="button-group">
+                  {buttons.map((button, idx) => (
+                    <a href={button.url} key={idx}>
                       <img src={button.image} alt={button.alt} title={button.title} />
                     </a>
                   ))}
                 </div>
+                {/* Add a horizontal line after the group except for the last one */}
+                {index < typeOrder.length - 1 && <hr />}
+              </div>
+            )
+          }
+          return null
+        })}
+        {/* Include the iframe if needed */}
+        <iframe
+          src="//incr.easrng.net/badge?key=changeme"
+          style="background: url(//incr.easrng.net/bg.gif)"
+          title="increment badge"
+          width="88"
+          height="31"
+          frameborder="0"
+        ></iframe>
+      </div>
     )
   }
 
-  // Combine base styles with custom styles
+  // Function to group buttons by type
+  function groupButtonsByType(buttons) {
+    const groups = {
+      misc: [],
+      friend: [],
+      standard: [],
+    }
+
+    buttons.forEach((button) => {
+      let type = button.type?.toLowerCase() || "standard"
+      if (type === "fren") type = "friend"
+      if (!groups[type]) type = "standard" // Default to 'standard' if type is unrecognized
+      groups[type].push(button)
+    })
+
+    return groups
+  }
+
+  // Use the existing style and add any additional styles if necessary
   Btn8831.css = style
 
   return Btn8831

quartz/components/buttons.json

@@ -3,12 +3,14 @@
     "image": "https://assets.derg.cz/buttons/theysosmall_by_liah.png",
     "url": "https://smolderg.xyz",
     "alt": "\"They so small!\" 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 \"Wow!\" \"Look!\" and \"Pet them!\"",
-    "title": "\"They so small!\" 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 \"Wow!\" \"Look!\" and \"Pet them!\""
+    "title": "\"They so small!\" 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 \"Wow!\" \"Look!\" and \"Pet them!\"",
+    "fren": true
   },
   {
     "image": "https://assets.derg.cz/buttons/sirlan.png",
     "url": "https://dragon-vi.be",
     "alt": "Button with the text Sirlan which points to dragon-vi.be",
-    "title": "Sirlan, the adorable eastern derg"
+    "title": "Sirlan, the adorable eastern derg",
+    "fren": true
   }
 ]

quartz/components/styles/buttons8831.scss

@@ -1,17 +1,31 @@
 .btn8831-container {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: column;
   justify-content: center;
   max-width: 60%;
   margin: 0 auto;
   opacity: 1.0;
 }
-.btn8831-container a {
+.button-group a {
   margin: 5px;
   opacity: 1;
 }
-.btn8831-container img {
+.button-group img {
   width: 88px;
   height: 31px;
   opacity: 1;
 }
+
+.button-group {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-bottom: 10px; /* Space between groups */
+}
+
+.btn8831-container hr {
+  width: 100%;
+  border: 0;
+  border-top: 1px solid #ccc;
+  margin: 10px 0;
+}