refactor donate page

commafeed-client/src/pages/app/DonatePage.tsx

@@ -0,0 +1,59 @@
+import { Trans } from "@lingui/macro"
+import { Anchor, Box, Code, Container, Group, List, Title } from "@mantine/core"
+import { Constants } from "app/constants"
+import React from "react"
+import { TbBrandGithub, TbBrandPaypal, TbCoinBitcoin, TbHeartFilled } from "react-icons/tb"
+
+const iconSize = 24
+
+export function DonatePage() {
+    return (
+        <Container size="xl" my="xl">
+            <Group>
+                <TbHeartFilled size={iconSize} color="red" />
+                <Title order={3}>
+                    <Trans>Donate</Trans>
+                </Title>
+            </Group>
+
+            <Box my="xl">
+                <Trans>
+                    <Box>Hey,</Box>
+                    <Box mt="xs">
+                        I'm Jérémie from Belgium and I've been working on CommaFeed in my free time for over 10 years now. Thanks for taking
+                        an interest in helping me continue supporting CommaFeed.
+                    </Box>
+                </Trans>
+
+                <List mt="lg">
+                    <List.Item icon={<TbBrandPaypal size={iconSize} />}>
+                        <Anchor
+                            href="https://www.paypal.com/donate/?business=9CNQHMJG2ZJVY&no_recurring=0&item_name=CommaFeed&currency_code=EUR"
+                            target="_blank"
+                            rel="noreferrer"
+                        >
+                            Paypal EUR
+                        </Anchor>
+                    </List.Item>
+                    <List.Item icon={<TbBrandPaypal size={iconSize} />}>
+                        <Anchor
+                            href="https://www.paypal.com/donate/?business=9CNQHMJG2ZJVY&no_recurring=0&item_name=CommaFeed&currency_code=USD"
+                            target="_blank"
+                            rel="noreferrer"
+                        >
+                            Paypal USD
+                        </Anchor>
+                    </List.Item>
+                    <List.Item icon={<TbBrandGithub size={iconSize} />}>
+                        <Anchor href="https://github.com/sponsors/Athou" target="_blank" rel="noreferrer">
+                            GitHub Sponsors
+                        </Anchor>
+                    </List.Item>
+                    <List.Item icon={<TbCoinBitcoin size={iconSize} />}>
+                        Bitcoin: <Code>{Constants.bitcoinWalletAddress}</Code>
+                    </List.Item>
+                </List>
+            </Box>
+        </Container>
+    )
+}