donation-site/index.tsx
Foster Hangdaan 2dbc943aa1
Use static assets from S3 bucket
This replaces all asset links to use the new public S3 bucket. It also
upgrades several packages:

- Simple Icons v10.2.0 to v13.9.0
- Tabler Icons v3.0.0/v2.47.0 to v3.14.0
- Monaspace v1.000 to v1.101
2024-09-08 11:12:53 -04:00

84 lines
2.5 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://minio.fosterhangdaan.com/public/images/icons/simple-icons/13.9.0/monero.svg",
qrcode: "images/xmr-address.svg",
address:
"47fQTNLjXUPPmjcB4eU3kuSwyHkpioms77XUjdCKMKPs6jwNNEfFpEYZM4sZi9NwZHHeJD3prgLTC66E2skbvzTm1jiXb1R",
preferred: true,
},
{
name: "Bitcoin",
icon:
"https://minio.fosterhangdaan.com/public/images/icons/simple-icons/13.9.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://minio.fosterhangdaan.com/public/images/icons/tabler-icons/3.14.0/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>
);
}