Sponsor links (#230)

* init * fixed card link * removed enlist and formatting tests * fixed formatting
ufsasewebmaster · Feb 15, 2025 · c984bb8 · c984bb8
1 parent bc23295
commit c984bb8
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 25 deletions.
diff --git a/src/client/components/sponsors/SponsorCard.tsx b/src/client/components/sponsors/SponsorCard.tsx
@@ -1,58 +1,47 @@
 import { cn } from "@/shared/utils";
 import { imageUrls } from "@assets/imageUrls";
-
-const typeStyles = {
-  Diamond: { src: imageUrls["Diamond.png"], size: "h-[23%]", translateY: "-translate-y-1/4", rotate: "rotate-[-15deg]" },
-  Gold: { src: imageUrls["Gold.png"], size: "h-[24%]", translateY: "-translate-y-1/3", rotate: "" },
-  Silver: { src: imageUrls["Silver.png"], size: "h-[23%]", translateY: "-translate-y-1/3", rotate: "" },
-  Bronze: { src: imageUrls["Bronze.png"], size: "h-[21%]", translateY: "-translate-y-1/3", rotate: "" },
-} as const;
-
-const styleBase = "absolute left-0 top-0 -translate-x-1/2";
-
-type SponsorType = keyof typeof typeStyles;
+import { Link } from "@tanstack/react-router";
 
 const SponsorCard = ({
   companyName,
   image,
+  link,
   shadowcolor,
-  type: sponsorTier,
+  type,
 }: {
   image: string;
   companyName: string;
   type: string;
   shadowcolor: string;
+  link: string;
 }) => {
-  const sponsorType = sponsorTier in typeStyles ? (sponsorTier as SponsorType) : "Bronze";
-
   return (
     <div className="flex h-full w-full flex-col" style={{ zIndex: 10 }}>
       <p
         className={cn(
           {
-            "text-saseBlue": sponsorType === "Diamond",
-            "text-amber-300": sponsorType === "Gold",
-            "text-slate-400": sponsorType === "Silver",
-            "text-amber-700": sponsorType === "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`,
         )}
       >
-        {sponsorType}
+        {type}
       </p>
 
       <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" />
         <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>
 
-        {sponsorType in typeStyles && (
-          <img
-            src={typeStyles[sponsorType].src}
-            alt={`${sponsorType} Icon`}
-            className={cn(styleBase, typeStyles[sponsorType].size, typeStyles[sponsorType].translateY, typeStyles[sponsorType].rotate || "")}
-          />
+        {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" />
+        ) : (
+          ""
         )}
       </div>
     </div>

diff --git a/src/client/components/sponsors/SponsorInfo.tsx b/src/client/components/sponsors/SponsorInfo.tsx
@@ -6,42 +6,49 @@ const SponsorInfo = [
     tier: "Diamond",
     image: imageUrls["BlueOriginLogo.png"],
     shadow_color: "shadow-blue-500",
+    link: "https://www.blueorigin.com/",
   },
   {
     company: "Fm Global",
     tier: "Diamond",
     image: imageUrls["FMGlobal.png"],
     shadow_color: "shadow-blue-500",
+    link: "https://www.fmglobal.com/",
   },
   {
     company: "Sargent & Lundy",
     tier: "Gold",
     image: imageUrls["S&L.png"],
     shadow_color: "shadow-[#FFD700]",
+    link: "https://www.sargentlundy.com/",
   },
   {
     company: "Axogen",
     tier: "Gold",
     image: imageUrls["Axogen.png"],
     shadow_color: "shadow-[#FFD700]",
+    link: "https://www.axogeninc.com/",
   },
   {
     company: "Johnson & Johnson",
     tier: "Silver",
     image: imageUrls["J&J.png"],
     shadow_color: "shadow-gray-600",
+    link: "https://www.jnj.com/",
   },
   {
     company: "Arthrex",
     tier: "Bronze",
     image: imageUrls["Arthrex.png"],
     shadow_color: "shadow-[#CD7F32]",
+    link: "https://www.arthrex.com/",
   },
   {
     company: "Google",
     tier: "Bronze",
     image: imageUrls["Google.png"],
     shadow_color: "shadow-[#CD7F32]",
+    link: "https://www.google.com/",
   },
 ];
 

diff --git a/src/client/routes/index.tsx b/src/client/routes/index.tsx
@@ -160,6 +160,7 @@ export const Route = createFileRoute("/")({
                       companyName={sponsor.company}
                       type={sponsor.tier}
                       shadowcolor={sponsor.shadow_color}
+                      link={sponsor.link}
                     />
                   ) : null,
                 )}

diff --git a/src/client/routes/sponsors.tsx b/src/client/routes/sponsors.tsx
@@ -26,6 +26,7 @@ export const Route = createFileRoute("/sponsors")({
                 companyName={sponsor.company}
                 type={sponsor.tier}
                 shadowcolor={sponsor.shadow_color}
+                link={sponsor.link}
               />
             ))}
           </div>