added buttons
This commit is contained in:
parent
11ac24e0fc
commit
1528d8c984
53
quartz/components/Btn8831.tsx
Normal file
53
quartz/components/Btn8831.tsx
Normal 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
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
7
quartz/components/buttons.json
Normal file
7
quartz/components/buttons.json
Normal file
|
@ -0,0 +1,7 @@
|
|||
[
|
||||
{
|
||||
"image": "https://assets.derg.cz/buttons/theysosmall_by_liah.png",
|
||||
"url": "https://smolderg.xyz",
|
||||
"alt": ""They so small!" 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 "Wow!" "Look!" and "Pet them!""
|
||||
}
|
||||
]
|
|
@ -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"],
|
||||
|
|
Loading…
Reference in a new issue