Skip to content

Commit eae26ae

Browse files
umarwaseeemumarwaseeem
committed
scoreboard table and users table
1 parent 933eb9a commit eae26ae

File tree

5 files changed

+233
-38
lines changed

5 files changed

+233
-38
lines changed

‎src/app/scoreboard/page.jsx

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react';
2+
3+
function Scoreboard() {
4+
const data = [
5+
{ name: 'John', score: 100 },
6+
{ name: 'Jane', score: 200 },
7+
{ name: 'Mike', score: 150 },
8+
{ name: 'Mike', score: 150 },
9+
{ name: 'Mike', score: 150 },
10+
{ name: 'Mike', score: 150 },
11+
{ name: 'Mike', score: 150 },
12+
];
13+
14+
return (
15+
<>
16+
<div className="flex flex-col items-center justify-center h-screen">
17+
<h1 className="text-4xl font-bold mb-4 text-yellow-400 py-10">Scoreboard</h1>
18+
<div className="relative overflow-x-auto w-full">
19+
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
20+
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-900 dark:text-gray-400">
21+
<tr>
22+
<th scope="col" className="px-6 py-3 border-b border-gray-200">
23+
Position
24+
</th>
25+
<th scope="col" className="px-6 py-3 border-b border-gray-200">
26+
Name
27+
</th>
28+
<th scope="col" className="px-6 py-3 border-b border-gray-200">
29+
Score
30+
</th>
31+
</tr>
32+
</thead>
33+
<tbody>
34+
{data.map((item, index) => (
35+
<tr
36+
key={index}
37+
className={
38+
index % 2 === 0
39+
? `bg-gray-50 dark:bg-gray-700`
40+
: `bg-white dark:bg-gray-800`
41+
}
42+
>
43+
<td className="px-6 py-4 border-b border-gray-200 font-medium text-gray-900 whitespace-nowrap dark:text-white">{index + 1}</td>
44+
<td className="px-6 py-4 border-b border-gray-200 font-medium text-gray-900 whitespace-nowrap dark:text-white">
45+
{item.name}
46+
</td>
47+
<td className="px-6 py-4 border-b border-gray-200 font-medium text-gray-900 whitespace-nowrap dark:text-white">{item.score}</td>
48+
</tr>
49+
))}
50+
</tbody>
51+
</table>
52+
</div>
53+
</div>
54+
</>
55+
);
56+
}
57+
58+
export default Scoreboard;

‎src/app/users/page.jsx

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
"use client"
2+
3+
import React from 'react'
4+
5+
import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
6+
7+
function Users() {
8+
9+
const supabase = createClientComponentClient();
10+
11+
const [users, setUsers] = React.useState([]);
12+
13+
React.useEffect(() => {
14+
console.log("DB Request");
15+
16+
const fetchUsers = async (category) => {
17+
try {
18+
const { data, error } = await supabase.from("users").select("*")
19+
// .eq("category", category);
20+
console.log("Get Users: (error):\n", error);
21+
console.log("Get Users: (data):\n", data);
22+
23+
if (data) {
24+
setUsers(
25+
data.map((item) => ({
26+
id: item.id,
27+
user_name: item.username,
28+
user_email: item.email,
29+
ctfs_played: item.ctfs_played,
30+
}))
31+
);
32+
}
33+
} catch (error) {
34+
console.error("Error fetching data:", error);
35+
}
36+
};
37+
38+
fetchUsers();
39+
40+
return () => {
41+
// Cleanup function
42+
// Perform any necessary cleanup here
43+
// For example, cancel any pending requests or subscriptions
44+
// This function will be called when the component unmounts
45+
console.log("Component unmounted");
46+
};
47+
}, []);
48+
49+
return (
50+
<>
51+
<div className="flex flex-col items-center justify-center h-screen">
52+
<h1 className="text-4xl font-bold mb-4 text-yellow-400 py-10">Users</h1>
53+
<div className="relative overflow-x-auto w-full">
54+
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
55+
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-900 dark:text-gray-400">
56+
<tr>
57+
<th scope="col" className="px-6 py-3 border-b border-gray-200">
58+
Position
59+
</th>
60+
<th scope="col" className="px-6 py-3 border-b border-gray-200">
61+
Name
62+
</th>
63+
<th scope="col" className="px-6 py-3 border-b border-gray-200">
64+
Score
65+
</th>
66+
</tr>
67+
</thead>
68+
<tbody>
69+
{users.map((item, index) => (
70+
<tr
71+
key={index}
72+
className={
73+
index % 2 === 0
74+
? `bg-gray-50 dark:bg-gray-700`
75+
: `bg-white dark:bg-gray-800`
76+
}
77+
>
78+
<td className="px-6 py-4 border-b border-gray-200 font-medium text-gray-900 whitespace-nowrap dark:text-white">{index + 1}</td>
79+
<td className="px-6 py-4 border-b border-gray-200 font-medium text-gray-900 whitespace-nowrap dark:text-white">
80+
{item.user_name}
81+
</td>
82+
<td className="px-6 py-4 border-b border-gray-200 font-medium text-gray-900 whitespace-nowrap dark:text-white">
83+
{item.user_email}
84+
</td>
85+
<td className="px-6 py-4 border-b border-gray-200 font-medium text-gray-900 whitespace-nowrap dark:text-white">{item.ctfs_played}</td>
86+
</tr>
87+
))}
88+
</tbody>
89+
</table>
90+
</div>
91+
</div>
92+
</>
93+
)
94+
}
95+
96+
export default Users

‎src/components/homeArea.jsx

+42-38
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Card, CardBody, Image, CardHeader } from "@nextui-org/react";
33
import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Pagination, getKeyValue } from "@nextui-org/react";
44
import { users } from "../utils/users_data";
55

6+
import Link from "next/link";
67

78
import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
89

@@ -16,9 +17,10 @@ export default function HomeArea() {
1617
React.useEffect(() => {
1718
console.log("DB Request");
1819

19-
const fetchData = async () => {
20+
const fetchData = async (category) => {
2021
try {
21-
const { data, error } = await supabase.from("ctf").select("*");
22+
const { data, error } = await supabase.from("ctf").select("*")
23+
// .eq("category", category);
2224
console.log("Get CTF By Category: (error):\n", error);
2325
console.log("Get CTF By Category: (data):\n", data);
2426

@@ -71,46 +73,48 @@ export default function HomeArea() {
7173
<div className="w-full h-full px-4 sm:px-8 md:px-16 py-2 sm:py-4 md:py-8 bg-[#2D3250]">
7274
<div className="grid gap-6 sm:gap-8 md:gap-10 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
7375
{list.map((item, index) => (
74-
<Card
75-
className="bg-[#1e243a] hover:bg-[#12172a] shadow-2xl"
76-
radius="sm"
77-
shadow="lg"
78-
key={index}
79-
isPressable
80-
onPress={() => console.log("item pressed")}
81-
>
82-
{/* <CardBody className="overflow-visible p-0">
76+
<Link href={`/challenge/${item.id}`} className="w-full">
77+
<Card
78+
className="bg-[#1e243a] hover:bg-[#12172a] shadow-2xl"
79+
radius="sm"
80+
shadow="lg"
81+
key={index}
82+
isPressable
83+
// onPress={() => console.log("item pressed")}
84+
>
85+
{/* <CardBody className="overflow-visible p-0">
8386
8487
</CardBody> */}
85-
<CardHeader className="flex gap-3 bg-[#1e243a]">
86-
<Image
87-
alt="nextui logo"
88-
height={40}
89-
color="primary"
90-
radius="sm"
91-
src="https://img.icons8.com/ios/50/flag.png"
92-
width={40}
93-
/>
94-
<div className="flex flex-col">
95-
<p className="text-small text-gray-400">{item.difficulty}</p>
96-
</div>
97-
</CardHeader>
98-
<CardBody className="text-lg justify-between">
99-
<div className="flex flex-col w-full">
100-
<div className="flex flex-row justify-between">
101-
<b className="text-yellow-400">{item.title}</b>
102-
{/* <p className="text-default-500">{item.no_of_qs}</p> */}
103-
<div class="relative flex items-center justify-center">
104-
<div class="absolute h-6 w-6 bg-primary-500 rounded-full"></div>
105-
<p class="text-default-200 text-[12px] z-10">{item.score}</p>
88+
<CardHeader className="flex gap-3 bg-[#1e243a]">
89+
<Image
90+
alt="nextui logo"
91+
height={40}
92+
color="primary"
93+
radius="sm"
94+
src="https://img.icons8.com/ios/50/flag.png"
95+
width={40}
96+
/>
97+
<div className="flex flex-col">
98+
<p className="text-small text-gray-400">{item.difficulty}</p>
99+
</div>
100+
</CardHeader>
101+
<CardBody className="text-lg justify-between">
102+
<div className="flex flex-col w-full">
103+
<div className="flex flex-row justify-between">
104+
<b className="text-yellow-400">{item.title}</b>
105+
{/* <p className="text-default-500">{item.no_of_qs}</p> */}
106+
<div class="relative flex items-center justify-center">
107+
<div class="absolute h-6 w-6 bg-primary-500 rounded-full"></div>
108+
<p class="text-default-200 text-[12px] z-10">{item.score}</p>
109+
</div>
106110
</div>
111+
{/* <div className="flex flex-row justify-between"> */}
112+
<span className="text-[12px] text-slate-400">{item.description}</span>
113+
{/* </div> */}
107114
</div>
108-
{/* <div className="flex flex-row justify-between"> */}
109-
<span className="text-[12px] text-slate-400">{item.description}</span>
110-
{/* </div> */}
111-
</div>
112-
</CardBody>
113-
</Card>
115+
</CardBody>
116+
</Card>
117+
</Link>
114118
))}
115119
</div>
116120
</div>

‎src/components/navbar.jsx

+3
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@ export default function App({ profileImage }) {
5252
<li>
5353
<Link href="/scoreboard" class="block py-2 px-3 text-yellow-400 hover:text-yellow-500" aria-current="page">Scoreboard</Link>
5454
</li>
55+
<li>
56+
<Link href="/users" class="block py-2 px-3 text-yellow-400 hover:text-yellow-500" aria-current="page">Users</Link>
57+
</li>
5558
</ul>
5659
</div>
5760
</div>

‎tsconfig.json

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"compilerOptions": {
3+
"lib": [
4+
"dom",
5+
"dom.iterable",
6+
"esnext"
7+
],
8+
"allowJs": true,
9+
"skipLibCheck": true,
10+
"strict": false,
11+
"noEmit": true,
12+
"incremental": true,
13+
"esModuleInterop": true,
14+
"module": "esnext",
15+
"moduleResolution": "node",
16+
"resolveJsonModule": true,
17+
"isolatedModules": true,
18+
"jsx": "preserve",
19+
"plugins": [
20+
{
21+
"name": "next"
22+
}
23+
]
24+
},
25+
"include": [
26+
"next-env.d.ts",
27+
".next/types/**/*.ts",
28+
"**/*.ts",
29+
"**/*.tsx"
30+
],
31+
"exclude": [
32+
"node_modules"
33+
]
34+
}

0 commit comments

Comments
 (0)