From fb02f862b23241789f9e1c270537e4dfa66399f5 Mon Sep 17 00:00:00 2001
From: betich <betich365@gmail.com>
Date: Sat, 22 Jun 2024 00:32:08 +0700
Subject: [PATCH] feat: add new sponsors

---
 src/components/Landing/Sponsor/List.tsx | 31 +++++++++++++++++++++----
 src/components/sponsor.ts               | 11 +++++++++
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/components/Landing/Sponsor/List.tsx b/src/components/Landing/Sponsor/List.tsx
index aac8025..6ec0fa2 100644
--- a/src/components/Landing/Sponsor/List.tsx
+++ b/src/components/Landing/Sponsor/List.tsx
@@ -1,21 +1,21 @@
-import type { Sponsor } from "../../sponsor";
+import { individualSponsors, type Sponsor } from "../../sponsor";
 
 export default function SponsorList({
   sponsors,
 }: Readonly<{ sponsors: Sponsor[] }>) {
   return (
-    <div className="flex flex-col gap-y-8">
+    <div className="mx-4 flex flex-col gap-y-8">
       <h2 className="font-workbench text-2xl font-bold">
         These people are kind (&rich) AF
       </h2>
       <p className="font-arimo text-lg font-light">
         thank you for your support!
       </p>
-      <div className="justify-centers grid w-full grid-cols-3 items-center gap-8">
+      <div className="grid w-full grid-cols-3 items-center justify-center gap-8">
         {sponsors.map((sponsor: Sponsor) => (
           <div
             key={sponsor.id}
-            className="h-full w-full transition-all duration-500 ease-in-out hover:shadow-lg"
+            className="h-auto w-full transition-all duration-500 ease-in-out hover:shadow-lg"
           >
             <a href={sponsor.link} rel="noopener noreferrer">
               <img
@@ -27,6 +27,29 @@ export default function SponsorList({
           </div>
         ))}
       </div>
+
+      <h2 className="mt-8 font-workbench text-2xl font-bold">
+        Individual sponsors
+      </h2>
+      <p className="font-arimo text-lg font-light">
+        Every help counts! Donate now at{" "}
+        <a
+          className="underline hover:no-underline"
+          href="https://grtn.org/e/sht8/sponsor_form"
+        >
+          this form
+        </a>
+      </p>
+      <div className="grid grid-cols-3 gap-4 font-arimo text-lg sm:grid-cols-5">
+        {individualSponsors.map((sponsor) => (
+          <div className="flex flex-col items-center gap-2">
+            <div className="text-center">{sponsor.name}</div>
+            <div className="text-center">
+              💰 ฿{String(sponsor.amount).padStart(2)}
+            </div>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }
diff --git a/src/components/sponsor.ts b/src/components/sponsor.ts
index 4b18133..45eda8d 100644
--- a/src/components/sponsor.ts
+++ b/src/components/sponsor.ts
@@ -52,6 +52,17 @@ const sponsors: Record<SponsorType, Sponsor[]> = {
   "Non-Monetary": [],
 };
 
+export const individualSponsors = [
+  {
+    name: "bier.bbbb",
+    amount: 69.69,
+  },
+  {
+    name: "ChunGPT",
+    amount: 888,
+  },
+];
+
 function getSponsors(type: SponsorType): Sponsor[] {
   return sponsors[type];
 }