web/DonateOptionsCard: add more preset options

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",
 

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 @@
         </button>
     </div>
     <div id="donation-options">
-        <DonationOption price={5} desc={$t("donate.card.option.5")} {send}>
+        {#each Object.entries(PRESET_DONATION_AMOUNTS) as [ amount, component ]}
-            <IconCup />
+            <DonationOption price={+amount} desc={$t(`donate.card.option.${amount}`)} {send}>
-        </DonationOption>
+                <svelte:component this={component} />
-        <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 />
             </DonationOption>
+        {/each}
     </div>
     <div id="donation-custom">
         <div id="input-container" class:focused={customFocused}>