Skip to content

Commit 745fc80

Browse files
estherbreathestherbreath
authored
exam and course ui (#197)
* exam and course ui * fix overflow
1 parent c17fb78 commit 745fc80

File tree

5 files changed

+284
-144
lines changed

5 files changed

+284
-144
lines changed

‎src/app/dashboard/institution/components/create-exam.tsx‎

Lines changed: 84 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22

33
import { useState } from "react";
4-
import { X, Pencil } from "lucide-react";
4+
import { X, Pencil, ArrowLeft, Plus } from "lucide-react";
55

66
interface Question {
77
title: string;
@@ -14,6 +14,7 @@ interface CreateExamModelProps {
1414
}
1515

1616
function CreateExamModel({ onClose }: CreateExamModelProps) {
17+
const [hovered, setHovered] = useState(false);
1718
const [items, setItems] = useState<string[]>([]);
1819
const [files, setFiles] = useState<File[]>([]);
1920
const [certification, setCertification] = useState<string>("Yes");
@@ -90,17 +91,34 @@ function CreateExamModel({ onClose }: CreateExamModelProps) {
9091

9192
return (
9293
<div className="w-full h-auto flex bg-inherit absolute left-0 transition-all duration-300 flex-col p-5">
93-
<div className="flex flex-col gap-10">
94-
<div className="sticky flex justify-end top-5 right-5">
95-
<button className=" border w-fit rounded-full p-0.5" onClick={onClose}><X size={14} color="white" /></button>
96-
</div>
94+
<div className="absolute flex justify-start -top-4 left-5 ">
95+
<button onClick={onClose}>
96+
<ArrowLeft className="text-4xl" color="white" />
97+
</button>
98+
</div>
99+
<div className="flex flex-col gap-10 overflow-y-auto scrollbar-hide scroll-smooth">
97100
<form className="flex flex-col gap-10" onSubmit={handleSubmit}>
98101
<div className="md:flex w-full space-y-5 md:space-y-0 gap-4">
99102
<div className="flex flex-col w-full md:w-[60%] gap-[20px]">
103+
<div
104+
className="w-full h-52 border border-dashed border-gray-600 rounded-lg flex flex-col items-center justify-center bg-[#121212] hover:border-gray-400 transition-colors"
105+
onMouseEnter={() => setHovered(true)}
106+
onMouseLeave={() => setHovered(false)}
107+
>
108+
<p className="text-gray-300 mb-3">Upload Image</p>
109+
<div
110+
className={`w-12 h-12 rounded-full flex items-center justify-center bg-[#2a2a2a] ${
111+
hovered ? "bg-gray-500" : ""
112+
} transition-colors`}
113+
>
114+
<Plus className="text-gray-200" />
115+
</div>
116+
</div>
100117
<div className="flex flex-col w-full">
101118
<label
102119
className="text-[#9596A0] text-[0.875rem] mb-1"
103-
htmlFor="examName">
120+
htmlFor="examName"
121+
>
104122
Exam Name*
105123
</label>
106124
<input
@@ -116,28 +134,30 @@ function CreateExamModel({ onClose }: CreateExamModelProps) {
116134
<div className="w-full flex flex-col">
117135
<label
118136
className="text-[#9596A0] text-[0.875rem] mb-1"
119-
htmlFor="examDescription">
137+
htmlFor="examDescription"
138+
>
120139
Exam Description
121140
</label>
122141
<textarea
123142
id="examDescription"
124143
className="bg-transparent placeholder:text-[#5E5E5E] border-[1px] min-h-[176px] outline-none border-[#252625] text-white text-[0.875rem] w-full md:w-full px-4 py-[0.40rem] rounded-[0.5rem]"
125144
placeholder="Write exam description"
126145
value={examDescription}
127-
onChange={(e) =>
128-
setExamDescription(e.target.value)
129-
}></textarea>
146+
onChange={(e) => setExamDescription(e.target.value)}
147+
></textarea>
130148
</div>
131149
<div className="flex w-full flex-col items-stretch">
132150
<label
133151
className="text-[#9596A0] text-[0.875rem] mb-1"
134-
htmlFor="examType">
152+
htmlFor="examType"
153+
>
135154
Exam Type*
136155
</label>
137156
<select
138157
className="bg-transparent border-[1px] outline-none border-[#252625] text-white text-[0.875rem] w-full px-4 py-[0.40rem] rounded-[0.5rem]"
139158
value={examType}
140-
onChange={(e) => setExamType(e.target.value)}>
159+
onChange={(e) => setExamType(e.target.value)}
160+
>
141161
<option className="bg-[#161716]" value="MC">
142162
Multiple choice
143163
</option>
@@ -148,16 +168,40 @@ function CreateExamModel({ onClose }: CreateExamModelProps) {
148168
</div>
149169
</div>
150170
<div className="flex flex-col w-full gap-[24px] md:w-[40%]">
171+
<button className="text-[#0E0F0E] bg-[#D0EFB1] py-3 text-center rounded-lg">
172+
Publish For $50
173+
</button>
174+
<button className="text-[#D6DFFE] bg-[#2D2E2D] py-3 text-center rounded-lg">
175+
Add to draft
176+
</button>
177+
<div className="flex w-full flex-col items-stretch">
178+
<label
179+
className="text-[#9596A0] text-[0.875rem] mb-1"
180+
htmlFor="courseAmount"
181+
>
182+
Exam amount*
183+
</label>
184+
<select className="bg-transparent border-[1px] outline-none border-[#252625] text-white text-[0.875rem] w-full px-3 py-2 rounded-[0.5rem]">
185+
<option className="bg-[#161716]" value="24">
186+
$24
187+
</option>
188+
<option className="bg-[#161716]" value="45">
189+
$45
190+
</option>
191+
</select>
192+
</div>
151193
<div className="flex w-full flex-col items-stretch">
152194
<label
153195
className="text-[#9596A0] text-[0.875rem] mb-1"
154-
htmlFor="candidateEligibility">
196+
htmlFor="candidateEligibility"
197+
>
155198
Candidate Eligibility*
156199
</label>
157200
<select
158201
className="bg-transparent border-[1px] outline-none border-[#252625] text-white text-[0.875rem] w-full px-4 py-[0.40rem] rounded-[0.5rem]"
159202
value={candidateEligibility}
160-
onChange={(e) => setCandidateEligibility(e.target.value)}>
203+
onChange={(e) => setCandidateEligibility(e.target.value)}
204+
>
161205
<option className="bg-[#161716]" value="SC">
162206
Paid Exam
163207
</option>
@@ -169,7 +213,8 @@ function CreateExamModel({ onClose }: CreateExamModelProps) {
169213
<div>
170214
<label
171215
className="text-[#9596A0] text-[0.875rem] mb-1"
172-
htmlFor="courseCategory">
216+
htmlFor="courseCategory"
217+
>
173218
Exam Category
174219
</label>
175220
<div className="bg-transparent border-[1px] outline-none border-[#252625] text-white text-[0.875rem] w-full px-4 py-[0.30rem] rounded-[0.5rem]">
@@ -179,19 +224,22 @@ function CreateExamModel({ onClose }: CreateExamModelProps) {
179224
scrollbarWidth: "none",
180225
msOverflowStyle: "none",
181226
}}
182-
className="overflow-x-scroll flex gap-[8px]">
227+
className="overflow-x-scroll flex gap-[8px]"
228+
>
183229
{items.map((item, index) => (
184230
<div
185231
key={index}
186-
className="bg-transparent text-white gap-2 flex items-center flex-none px-2 border-[#252625] border rounded-[8px]">
232+
className="bg-transparent text-white gap-2 flex items-center flex-none px-2 border-[#252625] border rounded-[8px]"
233+
>
187234
{item}
188235
<X size={14} color="white" />
189236
</div>
190237
))}
191238
</div>
192239
<button
193240
onClick={handleAddItem}
194-
className="bg-transparent text-white px-2 border-[#252625] border rounded-[8px]">
241+
className="bg-transparent text-white px-2 border-[#252625] border rounded-[8px]"
242+
>
195243
Add
196244
</button>
197245
</div>
@@ -200,13 +248,15 @@ function CreateExamModel({ onClose }: CreateExamModelProps) {
200248
<div className="flex w-full flex-col gap-[5px] items-stretch">
201249
<label
202250
className="text-[#9596A0] text-[0.875rem] mb-1"
203-
htmlFor="certification">
251+
htmlFor="certification"
252+
>
204253
Certification*
205254
</label>
206255
<select
207256
className="bg-transparent border-[1px] outline-none border-[#252625] text-white text-[0.875rem] w-full px-4 py-[0.40rem] rounded-[0.5rem]"
208257
value={certification}
209-
onChange={handleCertificationChange}>
258+
onChange={handleCertificationChange}
259+
>
210260
<option className="bg-[#161716]" value="Yes">
211261
Yes
212262
</option>
@@ -222,11 +272,13 @@ function CreateExamModel({ onClose }: CreateExamModelProps) {
222272
scrollbarWidth: "none",
223273
msOverflowStyle: "none",
224274
}}
225-
className="overflow-x-scroll flex gap-[8px]">
275+
className="overflow-x-scroll flex gap-[8px]"
276+
>
226277
{files.map((file, index) => (
227278
<div
228279
key={index}
229-
className="bg-transparent text-white px-2 flex flex-none border-[#252625] border rounded-[8px] items-center gap-2">
280+
className="bg-transparent text-white px-2 flex flex-none border-[#252625] border rounded-[8px] items-center gap-2"
281+
>
230282
{file.name}
231283
<button onClick={() => handleRemoveFile(index)}>
232284
<X size={14} color="white" />
@@ -243,7 +295,8 @@ function CreateExamModel({ onClose }: CreateExamModelProps) {
243295
/>
244296
<label
245297
htmlFor="fileInput"
246-
className="bg-transparent text-white px-2 border-[#252625] border rounded-[8px] flex items-center gap-1 cursor-pointer">
298+
className="bg-transparent text-white px-2 border-[#252625] border rounded-[8px] flex items-center gap-1 cursor-pointer"
299+
>
247300
Add file <X size={16} color="white" />
248301
</label>
249302
</div>
@@ -253,7 +306,8 @@ function CreateExamModel({ onClose }: CreateExamModelProps) {
253306
<div className="flex flex-col w-full items-stretch">
254307
<label
255308
className="text-[#9596A0] text-[0.875rem] mb-1"
256-
htmlFor="duration">
309+
htmlFor="duration"
310+
>
257311
Exam Duration*
258312
</label>
259313
<input
@@ -280,7 +334,8 @@ function CreateExamModel({ onClose }: CreateExamModelProps) {
280334
{questions.map((question, index) => (
281335
<div
282336
key={index}
283-
className="flex items-center md:w-[70%] gap-5 justify-between mb-3">
337+
className="flex items-center md:w-[70%] gap-5 justify-between mb-3"
338+
>
284339
<span className="bg-transparent border-[1px] outline-none border-[#252625] text-white text-[0.875rem] w-full px-4 py-[0.40rem] rounded-[0.5rem]">
285340
{question.title}
286341
</span>
@@ -329,7 +384,8 @@ function CreateExamModel({ onClose }: CreateExamModelProps) {
329384
<div className="flex flex-col mt-3">
330385
<label
331386
className="text-[#9596A0] text-[0.875rem] mb-1"
332-
htmlFor="answer">
387+
htmlFor="answer"
388+
>
333389
Answer
334390
</label>
335391
<input
@@ -345,7 +401,8 @@ function CreateExamModel({ onClose }: CreateExamModelProps) {
345401
<div className="flex items-center justify-center w-full ">
346402
<button
347403
onClick={handleAddQuestion}
348-
className="font-[WorkSans] py-[12px] px-[24px] font-medium bg-[#2D2E2D] rounded-[8px]">
404+
className="font-[WorkSans] py-[12px] px-[24px] font-medium bg-[#2D2E2D] rounded-[8px]"
405+
>
349406
<span className="font-black text-white">+</span> ADD QUESTION
350407
</button>
351408
</div>

‎src/app/dashboard/institution/exams/page.tsx‎

Lines changed: 54 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -31,59 +31,62 @@ const ExamDashboard: React.FC = () => {
3131

3232
return (
3333
<div className="bg-black min-h-screen p-6 text-white flex flex-col relative">
34-
35-
<div className="flex-grow overflow-x-auto">
36-
<Table className="w-full border-collapse text-left text-sm">
37-
<TableHeader>
38-
<TableRow className=" text-gray-400 bg-[#161716]">
39-
<TableHead className="p-3">SN</TableHead>
40-
<TableHead className="p-3">Name</TableHead>
41-
<TableHead className="p-3">Date</TableHead>
42-
<TableHead className="p-3">Candidates</TableHead>
43-
<TableHead className="p-3">Status</TableHead>
44-
</TableRow>
45-
</TableHeader>
46-
<TableBody>
47-
{exams.map((exam) => (
48-
<TableRow key={exam.id} className="border-b border-[#31283A]">
49-
<TableCell className="p-3">{exam.id}</TableCell>
50-
<TableCell className="p-3">Web3 Test</TableCell>
51-
<TableCell className="p-3">12th Dec, 2025</TableCell>
52-
<TableCell className="p-3">
53-
<button className="text-white border-[1px] border-[#2D2E2D] rounded-[3rem] font-normal text-[0.75rem] bg-transparent px-4 py-2">
54-
View
55-
</button>
56-
</TableCell>
57-
<td className="p-3 text-[#4B4B4B]">{exam.status}</td>
58-
</TableRow>
59-
))}
60-
</TableBody>
61-
</Table>
62-
</div>
34+
{!isModalOpen && (
35+
<>
36+
<div className="flex-grow overflow-x-auto">
37+
<Table className="w-full border-collapse text-left text-sm">
38+
<TableHeader>
39+
<TableRow className=" text-gray-400 bg-[#161716]">
40+
<TableHead className="p-3">SN</TableHead>
41+
<TableHead className="p-3">Name</TableHead>
42+
<TableHead className="p-3">Date</TableHead>
43+
<TableHead className="p-3">Candidates</TableHead>
44+
<TableHead className="p-3">Status</TableHead>
45+
</TableRow>
46+
</TableHeader>
47+
<TableBody>
48+
{exams.map((exam) => (
49+
<TableRow key={exam.id} className="border-b border-[#31283A]">
50+
<TableCell className="p-3">{exam.id}</TableCell>
51+
<TableCell className="p-3">Web3 Test</TableCell>
52+
<TableCell className="p-3">12th Dec, 2025</TableCell>
53+
<TableCell className="p-3">
54+
<button className="text-white border-[1px] border-[#2D2E2D] rounded-[3rem] font-normal text-[0.75rem] bg-transparent px-4 py-2">
55+
View
56+
</button>
57+
</TableCell>
58+
<td className="p-3 text-[#4B4B4B]">{exam.status}</td>
59+
</TableRow>
60+
))}
61+
</TableBody>
62+
</Table>
63+
</div>
6364

64-
{/* Create Exam Section */}
65-
<div className="mt-8">
66-
<h2 className="text-sm font-normal text-[#D6DFFE]">Create Exam</h2>
67-
<Card className="mt-2 bg-[#161716] p-6 rounded-lg text-center">
68-
<p className="text-sm font-normal text-[#D6DFFE]">
69-
Create an exam, set a date for takers.
70-
</p>
71-
<div className="mt-4 flex justify-center">
72-
<button
73-
onClick={openModal}
74-
className="flex items-center justify-center w-[4.5rem] h-[4.5rem] bg-[#2D2E2D] rounded-full"
75-
>
76-
<Plus size={16} color="white" />
77-
</button>
65+
{/* Create Exam Section */}
66+
<div className="mt-8">
67+
<h2 className="text-sm font-normal text-[#D6DFFE]">Create Exam</h2>
68+
<Card className="mt-2 bg-[#161716] p-6 rounded-lg text-center">
69+
<p className="text-sm font-normal text-[#D6DFFE]">
70+
Create an exam, set a date for takers.
71+
</p>
72+
<div className="mt-4 flex justify-center">
73+
<button
74+
onClick={openModal}
75+
className="flex items-center justify-center w-[4.5rem] h-[4.5rem] bg-[#2D2E2D] rounded-full"
76+
>
77+
<Plus size={16} color="white" />
78+
</button>
79+
</div>
80+
<button
81+
onClick={openModal}
82+
className="mt-8 bg-[#2D2E2D] px-4 py-2 rounded-md text-[#D6DFFE]"
83+
>
84+
+ CREATE EXAM
85+
</button>
86+
</Card>
7887
</div>
79-
<button
80-
onClick={openModal}
81-
className="mt-8 bg-[#2D2E2D] px-4 py-2 rounded-md text-[#D6DFFE]"
82-
>
83-
+ CREATE EXAM
84-
</button>
85-
</Card>
86-
</div>
88+
</>
89+
)}
8790

8891
{isModalOpen && <CreateExamModel onClose={closeModal} />}
8992
</div>

0 commit comments

Comments
 (0)