donation-site/index.tsx
2024-05-31 13:12:53 -04:00

77 lines
2.4 KiB
TypeScript

export const title = "Pay Foster Hangdaan";
export const description = "This site lists payment methods for making payments or donations to Foster Hangdaan.";
export const layout = "layout.tsx";
const crypto = [
{
name: "Monero",
icon: "https://static.fosterhangdaan.com/icons/simple-icons/v10.2.0/monero.svg",
qrcode: "images/xmr-address.svg",
address: "47fQTNLjXUPPmjcB4eU3kuSwyHkpioms77XUjdCKMKPs6jwNNEfFpEYZM4sZi9NwZHHeJD3prgLTC66E2skbvzTm1jiXb1R",
preferred: true,
},
{
name: "Bitcoin",
icon: "https://static.fosterhangdaan.com/icons/simple-icons/v10.2.0/bitcoin.svg",
qrcode: "images/btc-address.svg",
address: "bc1q3w9e0zm9ez24c8hhhfyamgchfvf9x85ean5wqr",
}
];
export default function Home(data: Lume.Data, _helpers: Lume.Helpers) {
return (
<div class="home-container">
<h1>{data.title}</h1>
<div class="preamble">
<p>This site lists the methods for sending payments or donations to <a href="https://www.fosterhangdaan.com">Foster Hangdaan</a>.</p>
<p>
I currently only accept cryptocurrency donations. My wallet addresses
are listed below:
</p>
</div>
<ul>
<li>
<details>
<summary>
<img
class="icon"
src="https://static.fosterhangdaan.com/icons/tabler-icons/v3.0.0/svg/outline/wallet.svg"
/>
<span>OpenAlias</span>
</summary>
<div class="content">
<p>
If your crypto wallet supports{" "}
<a href="https://openalias.org/">OpenAlias</a>, you can simply
send a payment to the address below:
</p>
<pre>pay.fosterhangdaan.com</pre>
</div>
</details>
</li>
{crypto.sort((a,b) => {
return a.name > b.name ? 1 : -1;
}).map((c) => (
<li>
<details>
<summary>
<img
class="icon"
src={c.icon}
/>
<span>{c.name}</span>
{c.preferred && <div class="tag">preferred</div>}
</summary>
<div class="content">
<img class="qrcode" src={c.qrcode} />
<pre>
{c.address}
</pre>
</div>
</details>
</li>
))}
</ul>
</div>
);
}