refactor donate page

This commit is contained in:
Athou
2023-05-26 08:28:23 +02:00
parent c2419e19fc
commit f7ad9c9905
33 changed files with 337 additions and 264 deletions

View File

@@ -1,5 +1,5 @@
import { t, Trans } from "@lingui/macro"
import { Anchor, Box, Center, Code, Container, createStyles, List, NativeSelect, SimpleGrid, Title } from "@mantine/core"
import { Anchor, Box, Container, createStyles, List, NativeSelect, SimpleGrid, Title } from "@mantine/core"
import { Constants } from "app/constants"
import { redirectToApiDocumentation } from "app/slices/redirect"
import { useAppDispatch, useAppSelector } from "app/store"
@@ -57,8 +57,6 @@ function NextUnreadBookmarklet() {
)
}
const bitcoinAddress = <Code>{Constants.bitcoinWalletAddress}</Code>
export function AboutPage() {
const version = useAppSelector(state => state.server.serverInfos?.version)
const revision = useAppSelector(state => state.server.serverInfos?.gitCommit)
@@ -84,41 +82,6 @@ export function AboutPage() {
<Box>
<Trans>If you encounter an issue, please report it on the issues page of the GitHub project.</Trans>
</Box>
<Box mt="md">
<Trans>
If you like this project, please consider a donation to support the developer and help cover the costs of
keeping this website online.
</Trans>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_donations" />
<input type="hidden" name="business" value="9CNQHMJG2ZJVY" />
<input type="hidden" name="lc" value="US" />
<input type="hidden" name="item_name" value="CommaFeed" />
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHosted" />
<input type="hidden" name="currency_code" value="USD" />
<Center mt="md">
<Box mr="md">
<input
type="image"
src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif"
name="submit"
alt="PayPal - The safer, easier way to pay online!"
/>
</Box>
<Box>
<select name="currency_code">
<option value="EUR">Euro</option>
<option value="USD">US Dollars</option>
</select>
</Box>
</Center>
</form>
</Box>
<Box mt="xs">
<Trans>For those of you who prefer bitcoin, here is the address: {bitcoinAddress}</Trans>
</Box>
</Section>
<Section title={<Trans>Goodies</Trans>} icon={<TbPuzzle size={24} />}>
<List>

View File

@@ -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>
)
}