54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
|
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
|