Skip to content

Commit 00bb921

Browse files
abhitrueprogrammerabhitrueprogrammer
authored
Merge pull request #22 from edum0/main
Details and profile components of dashboard done
2 parents 0c8025f + 1faa175 commit 00bb921

File tree

5 files changed

+194
-0
lines changed

5 files changed

+194
-0
lines changed

‎components/Dashboard/Details/details.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
"use client";
2+
import React from "react";
3+
import Image from "next/image";
4+
5+
interface DetailsCardProps {
6+
currentRound: string;
7+
timeRemaining: string;
8+
}
9+
10+
const DetailsCard: React.FC<DetailsCardProps> = ({
11+
currentRound,
12+
timeRemaining,
13+
}) => {
14+
return (
15+
<div className="w-75 rounded-lg bg-neutral-900 text-gray-200 shadow-md overflow-hidden border border-gray-700">
16+
{/* Header */}
17+
<div className="bg-neutral-800 text-center py-2">
18+
<h2 className="text-3xl font-bold font-nulshock tracking-wide text-[#c5bba7]">
19+
DETAILS
20+
</h2>
21+
</div>
22+
23+
{/* Body */}
24+
<div className="mt-3 p-6 flex flex-col items-center text-center space-y-6">
25+
{/* Current Round */}
26+
<div>
27+
<p className="text-lg font-inter font-normal text-white">Current Round</p>
28+
<p className="text-2xl font-normal font-brunoace text-green-500">{currentRound}</p>
29+
</div>
30+
31+
{/* Time Remaining */}
32+
<div>
33+
<p className="text-lg font-inter font-normal text-white">Time Remaining</p>
34+
<div className="border border-[#c5bba7] rounded-md px-4 py-2 mt-2">
35+
<p className="text-xl font-brunoace font-normal text-green-500">{timeRemaining}</p>
36+
</div>
37+
</div>
38+
39+
{/* Tip Box */}
40+
<div className="mt-3 bg-neutral-800 rounded-lg py-4 px-6 text-sm text-gray-300 italic max-w-xs">
41+
<p className="font-bold not-italic text-white font-inter mb-1">Tip:</p>
42+
<p className="font-extralight font-inter text-center justify-start text-white text-base pb-4">Remember: partial scores are awarded for partial solutions</p>
43+
</div>
44+
45+
{/* Enter Kitchen Button */}
46+
<div className="mt-7 mb-4">
47+
<button
48+
onClick={() => {
49+
// TODO: navigate to kitchen here
50+
}}
51+
className="!border-2 !border-green-500 !text-[#c5bba7] font-nulshock !bg-neutral-900 !px-2 !py-2 text-sm rounded-md !hover:bg-green-500 hover:text-white transition flex items-center">
52+
ENTER KITCHEN
53+
<Image
54+
src="/enter.svg"
55+
alt="close"
56+
width={30}
57+
height={30}
58+
draggable={false}
59+
unselectable="on"
60+
priority
61+
/>
62+
</button>
63+
</div>
64+
</div>
65+
</div>
66+
);
67+
};
68+
69+
export default DetailsCard;

‎components/Dashboard/Profile/profile.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
"use client";
2+
import React from "react";
3+
import Image from "next/image";
4+
5+
interface ProfileCardProps {
6+
name: string;
7+
email: string;
8+
totalScore: number;
9+
maxScore: number;
10+
}
11+
12+
const ProfileCard: React.FC<ProfileCardProps> = ({ name, email, totalScore, maxScore }) => {
13+
const progress = (totalScore / maxScore) * 100;
14+
15+
return (
16+
<div className="w-75 rounded-lg bg-neutral-900 text-gray-200 shadow-md overflow-hidden border border-gray-700">
17+
{/* Header strip */}
18+
<div className="bg-neutral-800 text-center py-2">
19+
<h2 className="text-3xl font-bold font-nulshock tracking-wide text-[#c5bba7]">PROFILE</h2>
20+
</div>
21+
22+
{/* Body */}
23+
<div className="p-4">
24+
{/* Avatar/Icon */}
25+
<div className="flex justify-center mt-2 mb-4">
26+
<Image
27+
src="/profile_picture.svg"
28+
alt="close"
29+
width={90}
30+
height={90}
31+
draggable={false}
32+
unselectable="on"
33+
priority
34+
/>
35+
</div>
36+
37+
{/* Info */}
38+
<div className="mt-4 mb-2">
39+
<p className="justify-start text-sm font-normal font-inter text-[#c5bba7]">Name</p>
40+
<p className="justify-start text-white text-lg font-normal font-inter">{name}</p>
41+
</div>
42+
43+
<div className="mt-2 mb-4">
44+
<p className="justify-start text-sm font-normal font-inter text-[#c5bba7]">Email</p>
45+
<p className="justify-start text-white text-lg font-normal font-inter truncate">{email}</p>
46+
</div>
47+
48+
{/* Score */}
49+
<div className="mt-12 mb-4">
50+
<p className="text-xl text-[#c5bba7] text-center font-brunoace mb-1">
51+
Total Score
52+
</p>
53+
54+
{/* Progress container */}
55+
<div className="mt-2 w-full bg-zinc-300 rounded-full h-5 relative overflow-hidden">
56+
{/* Green progress bar */}
57+
<div
58+
className="bg-green-500 h-5 absolute top-0 left-0"
59+
style={{ width: `${progress}%` }}
60+
></div>
61+
62+
{/* Score text (overlaid, centered across full bar) */}
63+
<div className="absolute inset-0 flex items-center justify-center">
64+
<span className="text-neutral-900 text-lg font-bold font-inter">
65+
{totalScore}/{maxScore}
66+
</span>
67+
</div>
68+
</div>
69+
</div>
70+
71+
72+
{/* Log Out Button */}
73+
<div className="flex justify-center mt-16 mb-8">
74+
<button
75+
onClick={() => {
76+
// TODO: add logout path here
77+
}}
78+
className="!border-2 !border-red-500 !text-[#c5bba7] font-nulshock !bg-neutral-900 !px-2 !py-2 text-sm rounded-md !hover:bg-red-500 hover:text-white transition flex items-center gap-1">
79+
<Image
80+
src="/logout.svg"
81+
alt="close"
82+
width={18}
83+
height={18}
84+
draggable={false}
85+
unselectable="on"
86+
priority
87+
/>
88+
LOG OUT
89+
</button>
90+
</div>
91+
</div>
92+
</div>
93+
);
94+
};
95+
96+
export default ProfileCard;

‎public/enter.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎public/logout.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎public/profile_picture.svg‎

Lines changed: 23 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)