site/quartz/components/Btn8831.tsx

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"

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>
    )
  }

  // Combine base styles with custom styles
  Btn8831.css = style

  return Btn8831
})() satisfies QuartzComponentConstructor