From 3d2ba7d1cd71c99e58747c47a719bfd412387b59 Mon Sep 17 00:00:00 2001
From: hetk987 <66132321+hetk987@users.noreply.github.com>
Date: Sat, 9 Nov 2024 16:06:38 -0600
Subject: [PATCH] aligned the images

---
 .../src/app/challenges/helpers/Prizes.tsx     | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/my-turborepo/apps/nextjs/src/app/challenges/helpers/Prizes.tsx b/my-turborepo/apps/nextjs/src/app/challenges/helpers/Prizes.tsx
index 13c5b7ac..2bcf6d80 100644
--- a/my-turborepo/apps/nextjs/src/app/challenges/helpers/Prizes.tsx
+++ b/my-turborepo/apps/nextjs/src/app/challenges/helpers/Prizes.tsx
@@ -1,27 +1,33 @@
 import Image from "next/image";
-
 import Heading from "~/app/challenges/helpers/Heading";
 
 interface prizeSchema {
   name: string;
   img_url?: string;
 }
+
 const places = ["1st", "2nd", "3rd", "4th", "5th"];
+
 export default function Prizes({ prizes }: { prizes: prizeSchema[] }) {
   return (
-    <div className="flex flex-row w-full gap-4">
+    <div className="flex flex-row w-full justify-between items-stretch p-10 text-center">
       {prizes.map((prize, index) => {
         return (
-          <div className="flex flex-col">
-            <Heading>{places[index] + " place: " + prize.name}</Heading>
-            {prize.img_url && (
-              <Image
-                width={300}
-                height={300}
-                src={prize.img_url}
-                alt={"Challenge Prize"}
-              />
-            )}
+          <div key={index} className="flex flex-col items-center w-full">
+            <Heading className="flex text-center items-center mb-2 ">
+              {places[index] + " place: " + prize.name}
+            </Heading>
+            <div className="flex-grow flex items-center justify-center w-full px-2">
+              {prize.img_url && (
+                <Image
+                  width={300}
+                  height={300}
+                  src={prize.img_url}
+                  alt={"Challenge Prize"}
+                  className="max-w-full max-h-full object-contain"
+                />
+              )}
+            </div>
           </div>
         );
       })}