ulysia/site
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

changed btns?

Browse source
This commit is contained in:
Ulysia 2024-10-14 09:08:15 +02:00
parent 045d3424ff
commit 0540dd89a0
1 changed files with 41 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
quartz/components/Btn8831.tsx
View file

@ -5,51 +5,50 @@ 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)
// 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);
// }, []);
// 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>
)
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;
opacity: 1;
justify-content: center;
}
.btn8831-container a {
margin: 5px;
}
.btn8831-container img {
width: 88px;
height: 31px;
}
`
// Define custom styles
const customStyle = `
.btn8831-container {
display: flex;
flex-wrap: wrap;
max-width: 60%;
margin: 0 auto;
opacity: 1;
justify-content: center;
}
.btn8831-container a {
margin: 5px;
}
.btn8831-container img {
width: 88px;
height: 31px;
}
`
// Combine base styles with custom styles
Btn8831.css = customStyle
// Combine base styles with custom styles
Btn8831.css = customStyle
return Btn8831
})() satisfies QuartzComponentConstructor
export default (() => Btn8831) satisfies QuartzComponentConstructor