Merge pull request #37 from codersforcauses/issue-31-Create_match_details_page

Create Match Details Component

Author: allyharrison

client/src/components/ui/Common/types.tsx

@@ -0,0 +1,13 @@
+export type MatchDetailsData = {
+  teamName: string;
+  opponent: string;
+  whitePins: number;
+  penaltyPins: number;
+  yellowCard: number;
+  redCard: number;
+  p1_postion: number;
+  p2_postion: number;
+  honorPoint: number;
+  regularPoint: number;
+  completedTime: number;
+};

client/src/components/ui/Leaderboard/List.tsx

@@ -130,7 +130,7 @@ export default function List({ data = [] }) {
   // Filter data for the selected group only
   const displayData = teamsData.filter((item) => item.group === selectedGroup);
 
-  const handleGroupChange = (e) => {
+  const handleGroupChange = (e: any) => {
     setSelectedGroup(e.target.value);
   };
 

client/src/components/ui/Matchdetails/List.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+
+import { MatchDetailsData } from "../Common/types";
+
+export type MatchDetailsProps = {
+  matchData: MatchDetailsData[];
+  header: string[];
+};
+
+export default function List({ matchData, header }: MatchDetailsProps) {
+  return (
+    <div className="w-full overflow-hidden rounded-lg shadow-lg">
+      <div className="overflow-x-auto">
+        <table className="min-w-full bg-white">
+          <thead>
+            <tr className="title bg-primary text-center font-bold text-white">
+              {header.map((row, index) => (
+                <th key={index} className="px-6 py-4 md:text-lg">
+                  {row}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="body-sm">
+            {matchData.map((row, index) => (
+              <tr
+                key={index}
+                className={`border-b border-gray-200 bg-green-50 text-center hover:bg-gray-100`}
+              >
+                <td className="px-6 py-4">{row.teamName}</td>
+                <td className="px-6 py-4">{row.opponent}</td>
+                <td className="px-6 py-4">{row.whitePins}</td>
+                <td className="px-6 py-4">{row.penaltyPins}</td>
+                <td className="px-6 py-4">{row.yellowCard}</td>
+                <td className="px-6 py-4">{row.redCard}</td>
+                <td className="px-6 py-4">{row.p1_postion}</td>
+                <td className="px-6 py-4">{row.p2_postion}</td>
+                <td className="px-6 py-4">{row.honorPoint}</td>
+                <td className="px-6 py-4">{row.regularPoint}</td>
+                <td className="px-6 py-4">{row.completedTime}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

client/src/pages/leaderboard.tsx

@@ -1,6 +1,5 @@
 import Image from "next/image";
 
-import Dropdown from "../components/ui/Leaderboard/Dropdown";
 import List from "../components/ui/Leaderboard/List";
 
 export default function LeaderboardPage() {

client/src/pages/matchdetails.tsx

@@ -0,0 +1,76 @@
+import Image from "next/image";
+import { useEffect, useState } from "react";
+
+import { MatchDetailsData } from "../components/ui/Common/types";
+import List, { MatchDetailsProps } from "../components/ui/Matchdetails/List";
+
+const columns = [
+  "Team name",
+  "Opponent",
+  "White Pins",
+  "Penalty Pins",
+  "Yellow Card",
+  "Red Card",
+  "P1 position",
+  "P2 position",
+  "Honour Point",
+  "Regular Point",
+  "Completed Time",
+];
+
+const mockData: MatchDetailsData[] = [
+  {
+    teamName: "Red Falcons",
+    opponent: "Blue Hawks",
+    whitePins: 2,
+    penaltyPins: 0,
+    yellowCard: 1,
+    redCard: 0,
+    p1_postion: 1,
+    p2_postion: 0,
+    honorPoint: 3,
+    regularPoint: 3,
+    completedTime: 240,
+  },
+  {
+    teamName: "Blue Hawks",
+    opponent: "Red Falcons",
+    whitePins: 2,
+    penaltyPins: 0,
+    yellowCard: 1,
+    redCard: 0,
+    p1_postion: 1,
+    p2_postion: 0,
+    honorPoint: 3,
+    regularPoint: 3,
+    completedTime: 240,
+  },
+];
+
+export default function MatchDetails() {
+  const [data, setData] = useState(mockData);
+
+  useEffect(() => {
+    // Send API Request
+  }, []);
+
+  return (
+    <div className="flex min-h-screen flex-col items-center bg-light pt-8">
+      <div>
+        <h1 className="title-large text-center font-bold">Match Details</h1>
+        <div className="relative mx-auto h-[80px] w-[1100px]">
+          <Image
+            src="/ProgressBar4.svg"
+            alt="Progress Bar"
+            fill
+            className="object-contain"
+            priority
+          />
+        </div>
+      </div>
+      <div className="relative mx-auto h-[80px] w-[1100px]">
+        <List header={columns} matchData={data} />
+      </div>
+    </div>
+  );
+}