Skip to content

Commit b1f3384

Browse files
Abh1noobAbh1noob
committed
feat: leaderboard page:
1 parent ae72ed1 commit b1f3384

3 files changed

Lines changed: 114 additions & 70 deletions

File tree

‎src/components/ViewScores.tsx‎

Lines changed: 74 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import { Leaderboard } from "@/api/leaderboard";
2-
import { Row } from "@tanstack/react-table";
3-
import React from "react";
1+
import { type Leaderboard } from "@/api/leaderboard";
42
import {
53
Dialog,
64
DialogContent,
@@ -9,70 +7,97 @@ import {
97
DialogTitle,
108
DialogTrigger,
119
} from "@/components/ui/dialog";
12-
import { Card, CardContent } from "./ui/card";
1310
import { Label } from "@radix-ui/react-dropdown-menu";
11+
import { type Row } from "@tanstack/react-table";
12+
import {
13+
Brush,
14+
Code,
15+
LayoutList,
16+
Presentation,
17+
Trophy,
18+
Users,
19+
} from "lucide-react";
1420
import { Button } from "./ui/button";
1521

1622
export default function ViewScores({ row }: { row: Row<Leaderboard> }) {
1723
return (
1824
<Dialog>
1925
<DialogTrigger asChild>
20-
<Button>View Scores</Button>
26+
<Button variant="outline" className="flex items-center gap-2">
27+
<Trophy className="h-5 w-5" /> View Scores
28+
</Button>
2129
</DialogTrigger>
2230
<DialogContent>
2331
<DialogHeader>
24-
<DialogTitle>Here are the scores: </DialogTitle>
32+
<DialogTitle className="mb-4 flex items-center gap-2">
33+
<Trophy className="h-6 w-6 text-yellow-500" /> Here are the scores:
34+
</DialogTitle>
2535
<DialogDescription>
26-
<Card>
27-
<CardContent className="overflow-y-auto space-y-2">
28-
<div>
29-
<Label className="font-semibold">Team Name:</Label>{" "}
30-
{row.original.team_name}
31-
</div>
32-
{row.original.rounds.map((round, index) => {
33-
const {
34-
design,
35-
implementation,
36-
innovation,
37-
presentation,
38-
teamwork,
39-
round_total,
40-
} = round;
41-
return (
42-
<div
43-
key={index}
44-
className=" border border-black p-2"
45-
>
46-
<div>Round {index} score: </div>
47-
<div>
48-
<Label className="font-semibold">Design:</Label>{" "}
49-
{design}
36+
<div className="mb-4 rounded-lg border border-gray-300 p-4">
37+
<Label className="text-lg font-semibold">Team Name:</Label>{" "}
38+
{row.original.team_name}
39+
</div>
40+
<div className="max-h-[65vh] overflow-auto">
41+
{row.original.rounds.map((round, index) => {
42+
const {
43+
design,
44+
implementation,
45+
innovation,
46+
presentation,
47+
teamwork,
48+
round_total,
49+
} = round;
50+
return (
51+
<div
52+
key={index}
53+
className="mb-4 rounded-lg border border-gray-400 p-4"
54+
>
55+
<div className="flex items-center gap-2 text-lg font-semibold">
56+
<LayoutList className="h-5 w-5 text-blue-500" /> Round{" "}
57+
{index + 1} Scores:
58+
</div>
59+
<div className="mt-2 flex flex-col gap-2">
60+
<div className="flex items-center gap-2">
61+
<Brush className="h-4 w-4 text-purple-500" />
62+
<Label className="font-semibold">
63+
Design: {design}
64+
</Label>
5065
</div>
51-
<div>
52-
<Label className="font-semibold">Implementation:</Label>{" "}
53-
{implementation}
66+
<div className="flex items-center gap-2">
67+
<Code className="h-4 w-4 text-green-500" />
68+
<Label className="font-semibold">
69+
Implementation: {implementation}
70+
</Label>
5471
</div>
55-
<div>
56-
<Label className="font-semibold">Innovation:</Label>{" "}
57-
{innovation}
72+
<div className="flex items-center gap-2">
73+
<Trophy className="h-4 w-4 text-yellow-500" />
74+
<Label className="font-semibold">
75+
Innovation: {innovation}
76+
</Label>
5877
</div>
59-
<div>
60-
<Label className="font-semibold">Presentation:</Label>{" "}
61-
{presentation}
78+
<div className="flex items-center gap-2">
79+
<Presentation className="h-4 w-4 text-red-500" />
80+
<Label className="font-semibold">
81+
Presentation: {presentation}
82+
</Label>
6283
</div>
63-
<div>
64-
<Label className="font-semibold">Teamwork:</Label>{" "}
65-
{teamwork}
84+
<div className="flex items-center gap-2">
85+
<Users className="h-4 w-4 text-blue-700" />
86+
<Label className="font-semibold">
87+
Teamwork: {teamwork}
88+
</Label>
6689
</div>
67-
<div>
68-
<Label className="font-semibold">Total Score:</Label>{" "}
69-
{round_total}
90+
<div className="mt-2 flex items-center gap-2 border-t pt-2">
91+
<Trophy className="h-5 w-5 text-orange-500" />
92+
<Label className="text-lg font-semibold">
93+
Total Score: {round_total}
94+
</Label>
7095
</div>
7196
</div>
72-
);
73-
})}
74-
</CardContent>
75-
</Card>
97+
</div>
98+
);
99+
})}
100+
</div>
76101
</DialogDescription>
77102
</DialogHeader>
78103
</DialogContent>

‎src/components/columns/LeaderBoardCol.tsx‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,46 @@
11
"use client";
22
import { type leaderboardUserSchema } from "@/api/leaderboard";
33
import { type ColumnDef } from "@tanstack/react-table";
4+
import { ArrowRight } from "lucide-react";
5+
import Link from "next/link";
46
import { type z } from "zod";
57
import ViewScores from "../ViewScores";
68
import ChangeRound from "../changeRound";
9+
import { Button } from "../ui/button";
710

811
const columns: ColumnDef<z.infer<typeof leaderboardUserSchema>>[] = [
912
{
1013
accessorKey: "team_name",
1114
header: "Team Name",
1215
},
16+
{
17+
accessorKey: "overall_total",
18+
header: "Final Score",
19+
},
1320
{
1421
accessorKey: "rounds",
1522
header: "Scores",
1623
cell: ({ row }) => <ViewScores row={row} />,
1724
},
18-
{
19-
accessorKey: "overall_total",
20-
header: "Final Score",
21-
},
22-
2325
{
2426
accessorKey: "ID",
2527
header: "Set Round",
2628
cell: ({ row }) => <ChangeRound row={row} />,
2729
},
30+
{
31+
accessorKey: "View",
32+
header: "View Team",
33+
cell: ({ row }) => (
34+
<Link
35+
href={`/team/${row.original.team_id}`}
36+
className="hover:cursor-pointer"
37+
>
38+
<Button variant="outline">
39+
<ArrowRight className="h-4 w-4" />
40+
</Button>
41+
</Link>
42+
),
43+
},
2844
];
2945

3046
export default columns;

‎src/components/columns/TeamCol.tsx‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,7 @@ const TeamActions = ({ teamId }: { teamId: string | null }) => {
1313
const router = useRouter();
1414

1515
return (
16-
<Button
17-
variant="outline"
18-
onClick={() => router.push(`/team/${teamId}`)}
19-
>
16+
<Button variant="outline" onClick={() => router.push(`/team/${teamId}`)}>
2017
<ArrowRight className="h-4 w-4" />
2118
</Button>
2219
);
@@ -25,38 +22,44 @@ const TeamActions = ({ teamId }: { teamId: string | null }) => {
2522
const columns: ColumnDef<Team>[] = [
2623
{
2724
accessorKey: "Name",
28-
header: ({ column }) => <DataTableColumnHeader column={column} title="Team Name" />,
25+
header: ({ column }) => (
26+
<DataTableColumnHeader column={column} title="Team Name" />
27+
),
2928
cell: ({ row }) => <span>{row.getValue("Name")}</span>,
3029
},
3130
{
3231
accessorKey: "NumberOfPeople",
33-
header: ({ column }) => <DataTableColumnHeader column={column} title="Number of People" />,
32+
header: ({ column }) => (
33+
<DataTableColumnHeader column={column} title="Number of People" />
34+
),
3435
cell: ({ row }) => <span>{row.getValue("NumberOfPeople")}</span>,
3536
},
3637
{
3738
accessorKey: "RoundQualified",
38-
header: ({ column }) => <DataTableColumnHeader column={column} title="Round Qualified" />,
39+
header: ({ column }) => (
40+
<DataTableColumnHeader column={column} title="Round Qualified" />
41+
),
3942
cell: ({ row }) => <span>{row.getValue("RoundQualified")}</span>,
4043
},
4144
{
4245
accessorKey: "Code",
43-
header: ({ column }) => <DataTableColumnHeader column={column} title="Team Code" />,
46+
header: ({ column }) => (
47+
<DataTableColumnHeader column={column} title="Team Code" />
48+
),
4449
cell: ({ row }) => <span>{row.getValue("Code")}</span>,
4550
},
4651
{
4752
accessorKey: "IsBanned",
48-
header: ({ column }) => <DataTableColumnHeader column={column} title="Banned" />,
49-
cell: ({ row }) => (
50-
<span>{row.getValue("IsBanned") ? "Yes" : "No"}</span>
53+
header: ({ column }) => (
54+
<DataTableColumnHeader column={column} title="Banned" />
5155
),
56+
cell: ({ row }) => <span>{row.getValue("IsBanned") ? "Yes" : "No"}</span>,
5257
},
5358
{
54-
accessorKey: "Actions",
55-
header: "Actions",
59+
accessorKey: "View",
60+
header: "View Team",
5661
cell: ({ row }) => {
57-
return (
58-
<TeamActions teamId={row.original.ID}/>
59-
);
62+
return <TeamActions teamId={row.original.ID} />;
6063
},
6164
},
6265
];

0 commit comments

Comments
 (0)