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 = ["friend", "standard", "misc"]

    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) => (
                    <div key={idx} class="button-item">
                      {renderButtonContent(button)}
                    </div>
                  ))}
                </div>
                {/* Add a horizontal line after the group except for the last one */}
                {index < typeOrder.length - 1 && <hr />}
              </div>
            )
          }
          return null
        })}
      </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
  }

  // Function to render button content based on contentType
  function renderButtonContent(button) {
    const contentType = button.contentType || "image" // Default to 'image'

    if (contentType === "image") {
      return (
        <a href={button.url}>
          <img src={button.image} alt={button.alt} title={button.title} />
        </a>
      )
    } else if (contentType === "iframe") {
      const iframeAttrs = button.iframeAttributes || {}
      return <iframe src={button.url} title={button.title} {...iframeAttrs}></iframe>
    } else {
      // Handle other content types if necessary
      return null
    }
  }

  // Use the existing style and add any additional styles if necessary
  Btn8831.css = style

  return Btn8831
})() satisfies QuartzComponentConstructor