diff --git a/public/event_poster.avif b/public/event_poster.avif new file mode 100644 index 0000000..4d67497 Binary files /dev/null and b/public/event_poster.avif differ diff --git a/src/app/event/[id]/components/event.jsx b/src/app/event/[id]/components/event.jsx index 513525b..c724aa1 100644 --- a/src/app/event/[id]/components/event.jsx +++ b/src/app/event/[id]/components/event.jsx @@ -51,7 +51,7 @@ function GenerateEvent({props:event}){ }; }, []); - const eventPoster = "https://media.licdn.com/dms/image/D4D22AQHTRDh3tAk0wA/feedshare-shrink_800/0/1713529970610?e=1725494400&v=beta&t=1BamLpGDgW7rWUcYBUFRkm_35Y1wseXAE9VZS80XbtE"; + const eventPoster = "/event_poster.avif"; return (
diff --git a/src/app/event/[id]/components/eventDetails.jsx b/src/app/event/[id]/components/eventDetails.jsx index 7d47a5a..e79b8d6 100644 --- a/src/app/event/[id]/components/eventDetails.jsx +++ b/src/app/event/[id]/components/eventDetails.jsx @@ -8,6 +8,8 @@ import EventRequirements from "./eventRequirements"; import EventPrizes from "./eventPrizes"; import EventConvenors from "./eventConvenors"; import EventVenue from "./eventVenue"; +import EventWinners from "./eventWinners"; + import { Montserrat } from "next/font/google"; const montserratFont = Montserrat({weight: ["100","400"], subsets: ["latin"]}); @@ -31,6 +33,8 @@ function EventDetails(props){ const [eventRequirements, setEventRequirements] = useState(event.requirements); const [eventPrizes , setEventPrizes] = useState(event.prizes); const [eventConvenors,setEventConvenors] = useState(event.convenors); + const [eventWinners,setEventWinners] = useState(event.winners); + //To update the remaining registration time each second useEffect(()=>{ setInterval(()=>{ @@ -65,7 +69,9 @@ function EventDetails(props){
- +
+ {(eventWinners === null || Object.keys(eventWinners).length === 0) ? null:} +

About Event

{eventDescription}
diff --git a/src/app/event/[id]/components/eventPoster.jsx b/src/app/event/[id]/components/eventPoster.jsx index cd4a45f..9f8fa23 100644 --- a/src/app/event/[id]/components/eventPoster.jsx +++ b/src/app/event/[id]/components/eventPoster.jsx @@ -1,8 +1,9 @@ import React from "react"; - +import Image from "next/image"; function EventPoster(props){ return <> + } diff --git a/src/app/event/[id]/components/eventWinners.jsx b/src/app/event/[id]/components/eventWinners.jsx new file mode 100644 index 0000000..7c9bfeb --- /dev/null +++ b/src/app/event/[id]/components/eventWinners.jsx @@ -0,0 +1,236 @@ +import React, { useEffect } from "react"; +export default function EventWinners(props) { + const eventWinners = props.eventWinners; + + return ( + <> +

Event Winners🎉

+ + + ); +} + +function GenerateWinners(winner, index) { + var prizeIcon = null; + if (index === 0) { + prizeIcon = ; + } else if (index === 1) { + prizeIcon = ; + } else if (index === 2) { + prizeIcon = ; + } else { + prizeIcon = index + 1 + `. `; + } + return ( +
  • +
    {prizeIcon}
    +

    + {winner} +

    +
    • + ); +} + +function GenerateWinnerCard(winnerCategory, index) { + return ( +
  • +

    {winnerCategory[0]}

    +
      + {winnerCategory[1].map((winner, idx) => { + return GenerateWinners(winner, idx); + })} +
    +
    • + ); +} + + +const BronzeTrophyIcon = ({ width = 32, height = 32 }) => ( + + + + + + + + + + + + + + + +); + +const SilverTrophyIcon = ({ width = 32, height = 32 }) => ( + + + + + + + + + + + + + + + +); + +const GoldTrophyIcon = ({ width = 32, height = 32 }) => ( + + + + + + + + + + + + + + + +); diff --git a/src/styles/event.css b/src/styles/event.css index 39455cb..5489afc 100644 --- a/src/styles/event.css +++ b/src/styles/event.css @@ -125,6 +125,7 @@ pre { flex-wrap: wrap; align-items: center; gap: 20px; + height: 100%; } .event-time-title{ font-weight: 600; @@ -275,6 +276,53 @@ pre { .event-grid-container{ margin-top: 50px; } +.event-winner-div{ + width: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + margin-top: 25px; +} +.event-winners-title{ + font-size: 32px; + font-weight: 700; + color: var(--primary); + +} +.event-winners-category{ + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + gap: 40px; +} +.winner-category-title{ + font-size: 26px; + color: var(--primary); + font-weight: bold; + text-decoration: underline; +} +.event-winner-list{ + display: flex; + justify-content: center; + align-items: center; + gap: 25px; + flex-wrap: wrap; + +} +.winner-name-div{ + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + font-weight: bold; +} +.winner-category-div{ + display: flex; + flex-direction: column; + align-items: center; +} @media screen and (max-width : 640px){ .event-details{ width: 100%; @@ -289,6 +337,9 @@ pre { .event-prizes>*{ justify-content: center; } + .event-prizes>ul>*{ + font-size: 18px; + } .event-special-prize-container>ul{ font-size: 18px; align-items: center; @@ -298,6 +349,65 @@ pre { justify-content: center; align-items: center; } + .event-special-prize-item>*{ + font-size: 18px; + } + .event-poster>img{ + width: 90%; + margin-top: 20px; + } + .event-days-left{ + width: 100%; + } + .event-date-time-container{ + font-size: 18px; + } + .event-description-title{ + font-size: 20px; + } + .event-details-description{ + font-size: 14px; + } + .event-mode-duration-container{ + scale: 80%; + } + .event-requirement-title{ + font-size: 20px; + } + .event-convenors-container{ + align-items: center; + } + .event-convenors-title{ + font-size: 20px; + } + .event-convenors{ + justify-content: center; + } + .event-convenors>*{ + font-size: 18px; + } + .event-venue-title{ + justify-content: center; + scale: 80%; + } + .event-winners-title{ + font-size: 28px; + } + + .winner-category-title{ + font-size: 24px; + } + .winner-name-div{ + font-size: 22px; + } + .event-winner-list{ + display: grid; + grid-template-columns: 1fr; + grid-auto-rows: 1fr; + } + .winner-name-div{ + height: 100%; + } } @media screen and (max-width : 1023px) and (min-width : 0px) { @@ -331,7 +441,8 @@ pre { } .event-date-time-container{ width: 100%; - display: flex; + display: grid; + grid-template-rows: 1fr 1fr; justify-content:center; } .event-mode-duration-container{