feat: new sponsors

src/components/Landing/Sponsor/List.tsx

@@ -1,8 +1,12 @@
-import { individualSponsors, type Sponsor } from "../../sponsor";
+import {
+  individualSponsors,
+  type Sponsor,
+  type SponsorData,
+} from "../../sponsor";
 
 export default function SponsorList({
   sponsors,
-}: Readonly<{ sponsors: Sponsor[] }>) {
+}: Readonly<{ sponsors: SponsorData }>) {
   return (
     <div className="mx-4 flex flex-col gap-y-8">
       <h2 className="font-workbench text-2xl font-bold">
@@ -12,7 +16,7 @@ export default function SponsorList({
         thank you for your support!
       </p>
       <div className="grid w-full grid-cols-3 items-center justify-center gap-8">
-        {sponsors.map((sponsor: Sponsor) => (
+        {sponsors["Graab"].map((sponsor: Sponsor) => (
           <div
             key={sponsor.id}
             className="h-auto w-full transition-all duration-500 ease-in-out hover:shadow-lg"
@@ -27,6 +31,43 @@ export default function SponsorList({
           </div>
         ))}
       </div>
+      <div className="grid w-full grid-cols-5 items-center justify-center gap-8">
+        {sponsors["Waii"].map((sponsor: Sponsor) => (
+          <div
+            key={sponsor.id}
+            className="h-auto w-full transition-all duration-500 ease-in-out hover:shadow-lg"
+          >
+            <a href={sponsor.link} rel="noopener noreferrer">
+              <img
+                src={`/8/${sponsor.logo}` ?? "/8/assets/placeholder.png"}
+                alt={sponsor.name}
+                className="w-full object-contain"
+              />
+            </a>
+          </div>
+        ))}
+      </div>
+      <h2 className="font-workbench text-2xl font-bold">
+        Non-monetary sponsorship
+      </h2>
+
+      <div className="grid w-full grid-cols-5 items-center justify-center gap-8">
+        {sponsors["Non-Monetary"].map((sponsor: Sponsor) => (
+          <div
+            key={sponsor.id}
+            className="h-auto w-full transition-all duration-500 ease-in-out hover:shadow-lg"
+          >
+            <a href={sponsor.link} rel="noopener noreferrer">
+              <img
+                src={`/8/${sponsor.logo}` ?? "/8/assets/placeholder.png"}
+                alt={sponsor.name}
+                className="w-full object-contain"
+              />
+            </a>
+            <p className="text-center text-sm">{sponsor.item}</p>
+          </div>
+        ))}
+      </div>
 
       <h2 className="mt-8 font-workbench text-2xl font-bold">
         Individual sponsors

src/components/Landing/Sponsor/index.astro

@@ -1,12 +1,10 @@
 ---
 import SponsorList from "./List";
-import { getSponsors } from "../../sponsor";
-
-const graabSponsors = getSponsors("Graab");
+import { sponsors } from "../../sponsor";
 ---
 
 <section class="min-h-screen" id="sponsor">
   <div class="flex flex-col max-w-xl mx-auto w-full">
-    <SponsorList client:load sponsors={graabSponsors} />
+    <SponsorList client:load sponsors={sponsors} />
   </div>
 </section>

src/components/sponsor.ts

@@ -13,9 +13,12 @@ export interface Sponsor {
   name: string;
   logo: string | null;
   link: string;
+  item?: string;
 }
 
-const sponsors: Record<SponsorType, Sponsor[]> = {
+export type SponsorData = Record<SponsorType, Sponsor[]>;
+
+export const sponsors: SponsorData = {
   Graab: [
     {
       id: "aona",
@@ -48,8 +51,36 @@ const sponsors: Record<SponsorType, Sponsor[]> = {
       link: "https://www.facebook.com/borntodev",
     },
   ],
-  Waii: [],
-  "Non-Monetary": [],
+  Waii: [
+    {
+      id: "gaijin",
+      name: "ไก่จินอินเจแปน",
+      logo: "/assets/sponsors/gaijin.png",
+      link: "https://www.facebook.com/gaijininjapan.blog",
+    },
+    {
+      id: "wawasabii",
+      name: "wawasabii",
+      logo: "/assets/sponsors/wawasabii.png",
+      link: "https://wawasabii.com/",
+    },
+  ],
+  "Non-Monetary": [
+    {
+      id: "kaoduen",
+      name: "น้ำดื่มเข้าเดือน",
+      logo: "/assets/sponsors/kaoduen.png",
+      link: "https://instagram.com/kaoduean.water",
+      item: "Water Bottle",
+    },
+    {
+      id: "iph",
+      name: "Intania Production House",
+      logo: "/assets/sponsors/iph.png",
+      link: "https://www.instagram.com/intania_production_house/",
+      item: "Photo Booth",
+    },
+  ],
 };
 
 export const individualSponsors = [