blitzwing/cobalt-7
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web/DonateOptionsCard: add more preset options

Browse source
This commit is contained in:
dumbmoron 2024-08-30 15:33:11 +00:00
parent 1debf3e639
commit 57a7090eb2
No known key found for this signature in database
2 changed files with 41 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
web/i18n/en/donate.json
View file

@ -16,6 +16,15 @@
"card.option.10": "full size pizza",
"card.option.15": "full lunch",
"card.option.30": "lunch for two",
"card.option.50": "10kg of cat food",
"card.option.100": "one year of domains",
"card.option.200": "air fryer",
"card.option.500": "fancy office chair",
"card.option.1599": "base macbook pro",
"card.option.4900": "10,000 apples",
"card.option.7398": "maxed out macbook pro",
"card.option.8629": "a small plot of land",
"card.option.9433": "luxury hot tub",
"card.custom.submit": "donate custom amount",

47
web/src/components/donate/DonateOptionsCard.svelte
View file

@ -2,23 +2,45 @@
import { donate } from "$lib/env";
import { t } from "$lib/i18n/translations";
import IconCoin from "@tabler/icons-svelte/IconCoin.svelte";
import IconCalendarRepeat from "@tabler/icons-svelte/IconCalendarRepeat.svelte";
import DonateCardContainer from "$components/donate/DonateCardContainer.svelte";
import DonationOption from "$components/donate/DonationOption.svelte";
import IconCoin from "@tabler/icons-svelte/IconCoin.svelte";
import IconCalendarRepeat from "@tabler/icons-svelte/IconCalendarRepeat.svelte";
import IconCup from "@tabler/icons-svelte/IconCup.svelte";
import IconPizza from "@tabler/icons-svelte/IconPizza.svelte";
import IconToolsKitchen2 from "@tabler/icons-svelte/IconToolsKitchen2.svelte";
import IconPaperBag from "@tabler/icons-svelte/IconPaperBag.svelte";
import IconArrowRight from "@tabler/icons-svelte/IconArrowRight.svelte";
import IconSoup from "@tabler/icons-svelte/IconSoup.svelte";
import IconFridge from "@tabler/icons-svelte/IconFridge.svelte";
import IconArmchair from "@tabler/icons-svelte/IconArmchair.svelte";
import IconDeviceLaptop from "@tabler/icons-svelte/IconDeviceLaptop.svelte";
import IconApple from "@tabler/icons-svelte/IconApple.svelte";
import IconPhoto from "@tabler/icons-svelte/IconPhoto.svelte";
import IconWorldWww from "@tabler/icons-svelte/IconWorldWww.svelte";
import IconBath from "@tabler/icons-svelte/IconBath.svelte";
let customInput: HTMLInputElement;
let customInputValue: number | null;
let customFocused = false;
const PRESET_DONATION_AMOUNTS = {
5: IconCup,
10: IconPizza,
15: IconSoup,
30: IconToolsKitchen2,
50: IconPaperBag,
100: IconWorldWww,
200: IconFridge,
500: IconArmchair,
1599: IconDeviceLaptop,
4900: IconApple,
7398: IconDeviceLaptop,
8629: IconPhoto,
9433: IconBath
};
type Processor = "stripe" | "liberapay";
let processor: Processor = "stripe";
@ -87,18 +109,11 @@
</button>
</div>
<div id="donation-options">
<DonationOption price={5} desc={$t("donate.card.option.5")} {send}>
<IconCup />
</DonationOption>
<DonationOption price={10} desc={$t("donate.card.option.10")} {send}>
<IconPizza />
</DonationOption>
<DonationOption price={15} desc={$t("donate.card.option.15")} {send}>
<IconToolsKitchen2 />
</DonationOption>
<DonationOption price={30} desc={$t("donate.card.option.30")} {send}>
<IconToolsKitchen2 />
{#each Object.entries(PRESET_DONATION_AMOUNTS) as [ amount, component ]}
<DonationOption price={+amount} desc={$t(`donate.card.option.${amount}`)} {send}>
<svelte:component this={component} />
</DonationOption>
{/each}
</div>
<div id="donation-custom">
<div id="input-container" class:focused={customFocused}>