site/quartz/components/Btn8831.tsx

import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
import style from "./styles/buttons8831.scss"

// Import the JSON data
import buttonsData from "./buttons.json"

export default (() => {
  // Define the component
  const Btn8831: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
    // Group buttons by type
    const groupedButtons = groupButtonsByType(buttonsData)

    // Define the order of types
    const typeOrder = ["misc", "friend", "standard"]

    return (
      <div class={`btn8831-container ${displayClass ?? ""}`}>
        {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>
    )
  }

  // 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
})() satisfies QuartzComponentConstructor