diff --git a/apps/website/src/assets/boxicons/bx-buy-me-a-coffee.svg b/apps/website/src/assets/boxicons/bx-buy-me-a-coffee.svg
new file mode 100644
index 000000000..5e105e2f7
--- /dev/null
+++ b/apps/website/src/assets/boxicons/bx-buy-me-a-coffee.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/website/src/assets/boxicons/bx-github.svg b/apps/website/src/assets/boxicons/bx-github.svg
new file mode 100644
index 000000000..d027cc0db
--- /dev/null
+++ b/apps/website/src/assets/boxicons/bx-github.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/website/src/assets/boxicons/bx-paypal.svg b/apps/website/src/assets/boxicons/bx-paypal.svg
new file mode 100644
index 000000000..e4f3db18c
--- /dev/null
+++ b/apps/website/src/assets/boxicons/bx-paypal.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/website/src/components/Button.css b/apps/website/src/components/Button.css
new file mode 100644
index 000000000..8c3355fcf
--- /dev/null
+++ b/apps/website/src/components/Button.css
@@ -0,0 +1,9 @@
+a.button {
+ display: block;
+ background: var(--brand-1);
+ padding: 0.5em 1em;
+ border-radius: 6px;
+ color: var(--brand-foreground-color);
+ text-decoration: none;
+ text-align: center;
+}
\ No newline at end of file
diff --git a/apps/website/src/components/Button.tsx b/apps/website/src/components/Button.tsx
new file mode 100644
index 000000000..9874e8aee
--- /dev/null
+++ b/apps/website/src/components/Button.tsx
@@ -0,0 +1,23 @@
+import { ComponentChildren } from "preact";
+import Icon from "./Icon";
+import "./Button.css";
+
+interface ButtonProps {
+ href?: string;
+ iconSvg?: string;
+ text: ComponentChildren;
+ openExternally?: boolean;
+}
+
+export default function Button({ href, iconSvg, openExternally, text }: ButtonProps) {
+ return (
+
+ {iconSvg && <>{" "}}
+ {text}
+
+ )
+}
diff --git a/apps/website/src/components/Icon.tsx b/apps/website/src/components/Icon.tsx
new file mode 100644
index 000000000..72f4597dd
--- /dev/null
+++ b/apps/website/src/components/Icon.tsx
@@ -0,0 +1,9 @@
+interface IconProps {
+ svg: string;
+}
+
+export default function Icon({ svg }: IconProps) {
+ return (
+
+ )
+}
diff --git a/apps/website/src/pages/Donate/Donate.css b/apps/website/src/pages/Donate/Donate.css
index c0de48c9e..748cefa97 100644
--- a/apps/website/src/pages/Donate/Donate.css
+++ b/apps/website/src/pages/Donate/Donate.css
@@ -16,13 +16,3 @@ section.donate ul {
flex-direction: row;
}
}
-
-section.donate ul a {
- display: block;
- background: var(--brand-1);
- padding: 0.5em 1em;
- border-radius: 6px;
- color: var(--brand-foreground-color);
- text-decoration: none;
- text-align: center;
-}
\ No newline at end of file
diff --git a/apps/website/src/pages/Donate/Donate.tsx b/apps/website/src/pages/Donate/Donate.tsx
index a8e2fd4c6..d028fce06 100644
--- a/apps/website/src/pages/Donate/Donate.tsx
+++ b/apps/website/src/pages/Donate/Donate.tsx
@@ -1,5 +1,9 @@
import Section from "../../components/Section";
import "./Donate.css";
+import githubIcon from "../../assets/boxicons/bx-github.svg?raw";
+import paypalIcon from "../../assets/boxicons/bx-paypal.svg?raw";
+import buyMeACoffeeIcon from "../../assets/boxicons/bx-buy-me-a-coffee.svg?raw";
+import Button from "../../components/Button";
export default function Donate() {
return (
@@ -10,9 +14,32 @@ export default function Donate() {
Consider supporting the main developer of the application via:
diff --git a/apps/website/src/style.css b/apps/website/src/style.css
index d4ebcca1a..5e4e15970 100644
--- a/apps/website/src/style.css
+++ b/apps/website/src/style.css
@@ -101,6 +101,17 @@ img {
object-fit: cover;
}
+.bx {
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ vertical-align: middle;
+}
+
+.bx svg {
+ fill: currentColor;
+}
+
@media (max-width: 719px) {
.grid-3-cols > *,