connect past winners to contentful

Author: justin-phxm

src/app/contentfulTypes.ts

@@ -44,6 +44,7 @@ export interface ContentTypeMap {
   timeline: BaseEntry;
   upcomingEvents: BaseEntry;
   ceremonyDetails: CeremonyDetails;
+  pastHackathonWinner: PastHackathonWinner;
   // add more types as needed...
 }
 
@@ -53,3 +54,14 @@ export interface CeremonyDetails extends BaseEntry {
   closingCeremonyLocation: string;
   closingCeremonyDate: string;
 }
+
+export interface PastHackathonWinner extends BaseEntry {
+  projectName: string;
+  projectDescription?: string;
+  projectImage?: Asset;
+  hackathonName?: string;
+  teamName?: string;
+  teamRanking?: number;
+  awardName?: string;
+  link?: string;
+}

src/components/LandingPage/PastWinners.tsx

@@ -1,84 +1,31 @@
+import { fetchContent } from "@/app/actions";
+import type { PastHackathonWinner } from "@/app/contentfulTypes";
 import { Underline } from "@/utils/text-utils";
 
 import WinnerCard from "./WinnerCard";
 
-export type PastWinner = {
-  name: string;
-  description: string;
-  image: string;
-  team: string;
-  rank: number;
-  award: string;
-  link: string;
-};
-
-const pastWinners: PastWinner[] = [
-  {
-    name: "Seed-Pod",
-    description: "A seed that grows into a pod.",
-    image: "seed-pod.jpg",
-    team: "Team 1",
-    rank: 1,
-    award: "2024 Winner",
-    link: "https://www.youtube.com/watch?v=mCdA4bJAGGk&t=19s",
-  },
-  {
-    name: "Seed-Pod",
-    description: "A seed that grows into a pod.",
-    image: "seed-pod.jpg",
-    team: "Team 2",
-    rank: 2,
-    award: "2024 Runner Up",
-    link: "https://www.youtube.com/watch?v=mCdA4bJAGGk&t=19s",
-  },
-  {
-    award: "Best Design",
-    name: "Seed-Pod",
-    description: "A seed that grows into a pod.",
-    image: "seed-pod.jpg",
-    team: "Team Solo Mid",
-    rank: 3,
-    link: "https://www.youtube.com/watch?v=mCdA4bJAGGk&t=19s",
-  },
-  {
-    award: "Best Presentation",
-    name: "Seed-Pod",
-    description: "A seed that grows into a pod.",
-    image: "seed-pod.jpg",
-    team: "Awesome team poggers",
-    rank: 4,
-    link: "https://www.youtube.com/watch?v=mCdA4bJAGGk&t=19s",
-  },
-  {
-    award: "Best Impact",
-    name: "Seed-Pod",
-    description: "A seed that grows into a pod.",
-    image: "seed-pod.jpg",
-    team: "Justin's cool team",
-    rank: 5,
-    link: "https://www.youtube.com/watch?v=mCdA4bJAGGk&t=19s",
-  },
-] as const;
-
-export default function PastWinners() {
-  const sortedPastWinners = pastWinners.reduce(
-    (acc, el) => (el.rank % 2 ? [...acc, el] : [el, ...acc]),
-    [] as PastWinner[],
-  );
-
+export default async function PastWinners() {
+  const data = await fetchContent("pastHackathonWinner");
+  const pastWinners = data.map((el) => el.fields);
+  const sortedPastWinners = pastWinners
+    .sort((a, b) => (a.teamRanking ?? 0) - (b.teamRanking ?? 0))
+    .reduce(
+      (acc, el, index) => (index % 2 ? [...acc, el] : [el, ...acc]),
+      [] as PastHackathonWinner[],
+    );
   return (
     <div className=" flex flex-col gap-2 bg-fuzzy-peach lg:p-10 ">
       <h1 className="text-nowrap p-4 text-2xl font-extrabold sm:w-1/4">
         <Underline noTick>
-          {" Last Year's  "}
+          {" Previous Year's  "}
           <span className="pl-1 italic text-awesomer-purple">Winners</span>
         </Underline>
       </h1>
       <div className="flex w-full snap-x items-center justify-center overflow-x-auto lg:overflow-visible">
         <ul className="flex max-h-screen w-full max-w-screen-2xl justify-around gap-2  sm:aspect-auto">
           {Object.entries(sortedPastWinners).map(([key, value], index) => (
             <WinnerCard
-              pastWinnersArraySize={pastWinners.length}
+              pastWinnersArraySize={sortedPastWinners.length}
               pastWinner={value}
               key={key}
               index={index}

src/components/LandingPage/WinnerCard.tsx

@@ -1,10 +1,9 @@
 import Link from "next/link";
 import { twMerge } from "tailwind-merge";
 
+import type { PastHackathonWinner } from "@/app/contentfulTypes";
 import imgPlaceholder from "@/images/imgplaceholder.png";
 
-import type { PastWinner } from "./PastWinners";
-
 const ColorCycles = [
   "bg-orange-300",
   "bg-awesomer-purple",
@@ -20,7 +19,7 @@ export default function WinnerCard({
   pastWinnersArraySize,
 }: {
   pastWinnersArraySize: number;
-  pastWinner: PastWinner;
+  pastWinner: PastHackathonWinner;
   className?: string;
   index: number;
 }) {
@@ -30,7 +29,9 @@ export default function WinnerCard({
     <li
       style={
         {
-          backgroundImage: `url(${imgPlaceholder.src})`,
+          backgroundImage: pastWinner.projectImage
+            ? `url(${pastWinner.projectImage.fields.file?.url})`
+            : `url(${imgPlaceholder.src})`,
           "--tw-scale-x": scaleValue,
           "--tw-scale-y": scaleValue,
         } as React.CSSProperties
@@ -41,21 +42,25 @@ export default function WinnerCard({
       )}
     >
       <Link
-        href={pastWinner.link}
+        href={
+          pastWinner.link
+            ? pastWinner.link
+            : "https://www.youtube.com/watch?v=mCdA4bJAGGk&t=19s"
+        }
         target="_blank"
         className="absolute inset-0 flex flex-col justify-end rounded-3xl bg-gradient-to-b from-black/50 via-black/0 to-black pb-4 shadow-2xl   drop-shadow-2xl  "
       >
         <div
           className={` ${ColorCycles[index % ColorCycles.length]}  w-fit rounded-r-3xl px-3 py-1 text-xs font-bold tracking-wider text-white shadow-lg xl:text-xl`}
         >
-          {pastWinner.award}
+          {pastWinner.awardName}
         </div>
         <div className="px-2 text-white">
           <h2 className="text-lg font-bold italic drop-shadow-xl xl:text-3xl">
-            {pastWinner.name}
+            {pastWinner.projectName}
           </h2>
           <p className=" truncate text-sm xl:text-lg">
-            {pastWinner.description}
+            {pastWinner.projectDescription}
           </p>
         </div>
       </Link>