feat: change layout

gean-dev · May 8, 2024 · bcf0a7e · bcf0a7e
1 parent 85517bf
commit bcf0a7e
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 33 deletions.
diff --git a/src/components/AllContests.astro b/src/components/AllContests.astro
@@ -0,0 +1,23 @@
+---
+import data from "../data/contests.json";
+import Contests from "./Contests.astro";
+
+const currentDate = new Date();
+const pastContests = data.filter((item) => {
+  const date = new Date(item.date + " " + item.endTime + " " + item.timeZone);
+  return date < currentDate;
+}).reverse();
+const upcomingContests = data.filter((item) => {
+  const date = new Date(item.date + " " + item.startTime + " " + item.timeZone);
+  return date > currentDate;
+});
+const ongoingContests = data.filter((item) => {
+  const startDate = new Date(item.date + " " + item.startTime + " " + item.timeZone);
+  const endDate = new Date(item.date + " " + item.endTime + " " + item.timeZone);
+  return startDate <= currentDate && endDate >= currentDate;
+});
+---
+
+<Contests title="Ongoing Contests" contests={ongoingContests} ended={false} />
+<Contests title="Upcoming Contests" contests={upcomingContests} ended={false} />
+<Contests title="Past Contests" contests={pastContests} ended={true} />
diff --git a/src/components/ContestCard.astro b/src/components/ContestCard.astro
@@ -0,0 +1,36 @@
+---
+interface Props {
+	contest: {
+    name: string;
+    date: string;
+    startTime: string;
+    endTime: string;
+    timeZone: string;
+    link: string;
+	},
+	ended: boolean;
+}
+
+const { contest, ended } = Astro.props;
+---
+
+<div class="w-full text-white border p-3 rounded-lg border-gray-300 px-4 sm:px-16">
+	<p class="text-2xl text-center font-semibold text-gray-200">
+		{contest.name}
+	</p>
+	<a href="#">
+		<!-- fix later -->
+		<p class="text-xl text-center mt-1 text-gray-300">
+			{contest.date}
+		</p>
+		<p class="text-xl text-center mt-1 text-gray-300">
+			{contest.startTime + "-" + contest.endTime + " " + contest.timeZone}
+		</p>
+	</a>
+	<button
+		onclick={`window.location.href='${contest.link}'`}
+		class="p-1 rounded-md text-center mt-2 bg-[#ff851b] w-full hover:bg-[#ff851bdc]"
+	>
+		{ended ? "View Results" : "Register"}
+	</button>
+</div>
diff --git a/src/components/Contests.astro b/src/components/Contests.astro
@@ -1,27 +1,42 @@
 ---
-import data from "../data/contests.json";
-import Card from "./Contests/Card.astro";
+import ContestCard from './ContestCard.astro';
+
+interface Props {
+  title: string;
+  contests: {
+    name: string;
+    date: string;
+    startTime: string;
+    endTime: string;
+    timeZone: string;
+    link: string;
+  }[];
+  ended: boolean;
+}
+
+const { title, contests, ended } = Astro.props;
 ---
 
-<section class="w-full flex justify-center flex-col gap-y-5 mt-5">
-  {
-    data.map((item, index) => (
-      <Card>
-        <p class="text-2xl text-center font-semibold text-gray-200">
-          {item.name}
-        </p>
-        <a href="#">
-          <!-- fix later -->
-          <p class="text-xl text-center mt-1 text-gray-300">{item.date}</p>
-          <p class="text-xl text-center mt-1 text-gray-300">{item.time}</p>
-        </a>
-        <button
-          onclick={`window.location.href='${item.link}'`}
-          class="p-1 rounded-md text-center mt-2 bg-[#ff851b] w-full hover:bg-[#ff851bdc]"
-        >
-          Register
-        </button>
-      </Card>
-    ))
-  }
-</section>
+{() => {
+  if (contests.length === 0) return;
+  return (
+  <div class="flex justify-center">
+    <div class="mt-5 w-full">
+      <div class="flex justify-center w-full">
+        <h1 class="text-4xl font-bold text-white mt-5 flex">
+         {title}
+        </h1>
+      </div>
+    </div>
+  </div>
+  <div class={`flex justify-center ${contests.length > 1 ? "" : "px-1"}`}>
+    <div class={`mt-5 flex justify-center w-full ${contests.length > 1 ? "" : "lg:w-1/2"}`}>
+      <section class={`w-full grid justify-center gap-4 mt-5 grid-cols-1 ${contests.length > 1 ? "lg:grid-cols-2" : ""}`}>
+        {contests.map((contest, index) =>
+          <ContestCard contest={contest} ended={ended} />
+        )}
+      </section>
+    </div>
+  </div>
+  );
+}}
diff --git a/src/data/contests.json b/src/data/contests.json
@@ -1,16 +1,56 @@
 [
   {
     "id": "1",
+    "name": "Pre TOI 19",
+    "date": "7 May 2023",
+    "startTime": "19:00",
+    "endTime": "22:00",
+    "timeZone": "GMT+7",
+    "link": "https://geandev.contest.codeforces.com/group/y3JXgQG05K/contests"
+  },
+  {
+    "id": "2",
+    "name": "Gean Dev DP Contest",
+    "date": "12 May 2023",
+    "startTime": "14:00",
+    "endTime": "19:00",
+    "timeZone": "GMT+7",
+    "link": "https://otog.in.th/contest/history/78"
+  },
+  {
+    "id": "3",
     "name": "Gean Dev Round 1",
     "date": "14 October 2023",
-    "time": "18.00-23.00 GMT+7",
+    "startTime": "18:00",
+    "endTime": "23:00",
+    "timeZone": "GMT+7",
     "link": "https://geandev.contest.codeforces.com/group/y3JXgQG05K/contests"
   },
   {
-    "id": "2",
+    "id": "4",
     "name": "Gean Dev Round 2",
     "date": "13 March 2024",
-    "time": "18.00-23.00 GMT+7",
-    "link": "/contest/round-2"
+    "startTime": "18:00",
+    "endTime": "23:00",
+    "timeZone": "GMT+7",
+    "link": "https://geandev.contest.codeforces.com/group/y3JXgQG05K/contests"
+  },
+  {
+    "id": "5",
+    "name": "Pre TOI 20 Day 1",
+    "date": "10 May 2024",
+    "startTime": "18:00",
+    "endTime": "23:00",
+    "timeZone": "GMT+7",
+    "link": "https://geandev.contest.codeforces.com/group/y3JXgQG05K/contests"
+  },
+  {
+    "id": "6",
+    "name": "Pre TOI 20 Day 2",
+    "date": "11 May 2024",
+    "startTime": "18:00",
+    "endTime": "23:00",
+    "timeZone": "GMT+7",
+    "link": "https://geandev.contest.codeforces.com/group/y3JXgQG05K/contests"
   }
 ]
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,11 +1,11 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import Contests from "../components/Contests.astro";
+import AllContests from "../components/AllContests.astro";
 ---
 
 <Layout title="Contest | Gean Dev">
-  <main class="flex justify-center w-full min-h-screen items-center">
-    <div class="absolute top-4 w-full">
+  <main>
+    <div class="mt-5 w-full">
       <div class="flex justify-center w-full">
         <h1 class="text-8xl font-bold text-white mt-5 hidden lg:flex">
           Gean Dev Contests
@@ -16,8 +16,10 @@ import Contests from "../components/Contests.astro";
         </div>
       </div>
     </div>
-    <div class="flex flex-col">
-      <Contests />
+    <div class="flex justify-center w-full">
+      <div class="w-3/4 lg:w-3/4 md:w-1/2">
+        <AllContests />
+      </div>
     </div>
   </main>
 </Layout>