diff --git a/web/i18n/en/donate.json b/web/i18n/en/donate.json index 72464c3b..5696cc5a 100644 --- a/web/i18n/en/donate.json +++ b/web/i18n/en/donate.json @@ -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", diff --git a/web/src/components/donate/DonateOptionsCard.svelte b/web/src/components/donate/DonateOptionsCard.svelte index f01a9217..b6f19cf7 100644 --- a/web/src/components/donate/DonateOptionsCard.svelte +++ b/web/src/components/donate/DonateOptionsCard.svelte @@ -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 @@
- - - - - - - - - - - - + {#each Object.entries(PRESET_DONATION_AMOUNTS) as [ amount, component ]} + + + + {/each}