added buttons

This commit is contained in:
Ulysia 2024-10-14 08:49:37 +02:00
parent 11ac24e0fc
commit 1528d8c984
4 changed files with 63 additions and 1 deletions

View file

@ -0,0 +1,53 @@
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

View file

@ -1,6 +1,7 @@
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
import style from "./styles/footer.scss"
import FooterLinksConstructor from "./Footer_links"
import Btn8831 from "./Btn8831"
interface Options {
links: Record<string, string>
@ -14,6 +15,7 @@ export default ((opts?: Options) => {
return (
<footer class={`${displayClass ?? ""}`}>
<FooterLinks displayClass={displayClass} cfg={cfg} />
<Btn8831 displayClass={displayClass} cfg={cfg} />
</footer>
)
}

View file

@ -0,0 +1,7 @@
[
{
"image": "https://assets.derg.cz/buttons/theysosmall_by_liah.png",
"url": "https://smolderg.xyz",
"alt": "&quot;They so small!&quot; 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 &quot;Wow!&quot; &quot;Look!&quot; and &quot;Pet them!&quot;"
}
]

View file

@ -14,7 +14,7 @@
"esModuleInterop": true,
"jsx": "react-jsx",
"jsxImportSource": "preact",
"types": ["preact"] // Add this line
"types": ["preact"] // Add this line
},
"include": ["**/*.ts", "**/*.tsx", "./package.json"],
"exclude": ["build/**/*.d.ts"],