Merge pull request #259 from ufsasewebmaster/sponsor-icons

update sponsorcard.tsx to include icons (Wan's code)
ufsasewebmaster · Feb 26, 2025 · 225df44 · 225df44
2 parents ad1ecb2 + b05bb2e
commit 225df44
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 22 deletions.
diff --git a/src/client/components/sponsors/SponsorCard.tsx b/src/client/components/sponsors/SponsorCard.tsx
@@ -2,30 +2,59 @@ import { cn } from "@/shared/utils";
 import { imageUrls } from "@assets/imageUrls";
 import { Link } from "@tanstack/react-router";
 
-const SponsorCard = ({
-  companyName,
-  image,
-  link,
-  shadowcolor,
-  type,
-}: {
-  image: string;
+interface SponsorStyle {
+  src: string;
+  size: string;
+  translateY: string;
+  rotate?: string;
+}
+
+type SponsorType = "Diamond" | "Gold" | "Silver" | "Bronze";
+
+const typeStyles: Record<SponsorType, SponsorStyle> = {
+  Diamond: {
+    src: imageUrls["Diamond.png"],
+    size: "h-[30%]",
+    translateY: "-translate-y-1/3",
+    rotate: "rotate-[-15deg]",
+  },
+  Gold: {
+    src: imageUrls["Gold.png"],
+    size: "h-[30%]",
+    translateY: "-translate-y-1/3",
+  },
+  Silver: {
+    src: imageUrls["Silver.png"],
+    size: "h-[30%]",
+    translateY: "-translate-y-1/3",
+  },
+  Bronze: {
+    src: imageUrls["Bronze.png"],
+    size: "h-[30%]",
+    translateY: "-translate-y-1/3",
+  },
+};
+
+interface SponsorCardProps {
   companyName: string;
-  type: string;
-  shadowcolor: string;
+  image: string;
   link: string;
-}) => {
+  shadowcolor: string;
+  type: SponsorType;
+}
+
+const SponsorCard = ({ companyName, image, link, shadowcolor, type }: SponsorCardProps) => {
   return (
     <div className="flex h-full w-full flex-col" style={{ zIndex: 10 }}>
       <p
         className={cn(
           {
-            "text-saseBlue": type == "Diamond",
-            "text-amber-300": type == "Gold",
-            "text-slate-400": type == "Silver",
-            "text-amber-700": type == "Bronze",
+            "text-saseBlue": type === "Diamond",
+            "text-amber-300": type === "Gold",
+            "text-slate-400": type === "Silver",
+            "text-amber-700": type === "Bronze",
           },
-          `pb-2 text-center font-redhat text-4xl font-semibold`,
+          "pb-2 text-center font-redhat text-4xl font-semibold",
         )}
       >
         {type}
@@ -34,14 +63,21 @@ const SponsorCard = ({
       <div
         className={`relative flex h-full flex-col items-center rounded-2xl border-4 border-black bg-white p-1 ${shadowcolor} shadow-2xl duration-300 hover:scale-105`}
       >
-        <Link to={link} className="absolute left-0 top-0 h-full w-full" />
+        <Link to={link} className="absolute inset-0 z-10" />
         <img src={image} alt="Company Logo" className="h-5/6 w-full rounded-2xl" />
         <p className="pb-4 pt-4 text-center font-redhat text-3xl font-semibold">{companyName}</p>
 
-        {type === "Diamond" ? (
-          <img src={imageUrls["Diamond.png"]} alt="Diamond Icon" className="absolute left-0 top-0 h-[30%] -translate-x-1/2 -translate-y-1/3" />
-        ) : (
-          ""
+        {type in typeStyles && (
+          <img
+            src={typeStyles[type].src}
+            alt={`${type} Icon`}
+            className={cn(
+              "absolute left-0 top-0 -translate-x-1/2",
+              typeStyles[type].size,
+              typeStyles[type].translateY,
+              typeStyles[type].rotate ?? "",
+            )}
+          />
         )}
       </div>
     </div>

diff --git a/src/client/routes/sponsors.tsx b/src/client/routes/sponsors.tsx
@@ -24,7 +24,7 @@ export const Route = createFileRoute("/sponsors")({
                 key={sponsor.company}
                 image={sponsor.image}
                 companyName={sponsor.company}
-                type={sponsor.tier}
+                type={sponsor.tier as "Diamond" | "Gold" | "Silver" | "Bronze"}
                 shadowcolor={sponsor.shadow_color}
                 link={sponsor.link}
               />