Skip to content

Commit a5f1b68

Browse files
chiscookeke11chiscookeke11
authored
ADD: students notification (#128)
* ADD: students notification * ADD: questions, payments and announcements notifications * tutor's notification page * test passed * FIX: notification page structure
1 parent 4317ba9 commit a5f1b68

File tree

8 files changed

+285
-3
lines changed

8 files changed

+285
-3
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/dashboard/tutor/notification/components/Announcements.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import Image from "next/image";
2+
import speakerIcon from "@/public/megaphone-02.svg";
3+
4+
const announcementNotifications = [
5+
{
6+
heading: "Upcoming Student Assessments",
7+
message:
8+
"Don’t forget to prepare your students for the Quarterly Assessment starting Feb 10th, 2025.",
9+
},
10+
{
11+
heading: "Policy Update",
12+
message:
13+
"Starting March 1st, 2025, all session reports must be submitted within 24 hours of the session.",
14+
},
15+
];
16+
17+
const Announcements = () => {
18+
return (
19+
<>
20+
{announcementNotifications.map((announcementNotification, index) => (
21+
<div
22+
key={index}
23+
className="w-full flex justify-between items-center p-6 bg-[#161716] rounded-lg "
24+
>
25+
<div className="flex items-center gap-[18px] ">
26+
<span className=" h-12 w-12 rounded-full bg-[#2D2E2D] flex items-center justify-center ">
27+
<Image
28+
src={speakerIcon}
29+
alt="students"
30+
height={100}
31+
width={100}
32+
className="w-6 h-6 object-contain "
33+
/>
34+
</span>
35+
<div>
36+
<h1 className="text-[#CCCCCC] text-base font-medium mb-1 ">
37+
{" "}
38+
{announcementNotification.heading}{" "}
39+
</h1>
40+
<p className="text-[#6E6E6E] text-base font-medium ">
41+
{" "}
42+
{announcementNotification.message}{" "}
43+
</p>
44+
</div>
45+
</div>
46+
</div>
47+
))}
48+
</>
49+
);
50+
};
51+
52+
export default Announcements;

‎src/app/dashboard/tutor/notification/components/NewStudent.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import Image from "next/image";
2+
import studentIcon from "@/public/img/tutor icon/studentsDashboard.svg";
3+
4+
const studentNotifications = [
5+
{
6+
heading: "Josh joined your design class",
7+
content: "Welcome them by sending them a warm message",
8+
time: "3hrs ago",
9+
},
10+
{
11+
heading: "Faith joined your design class",
12+
content: "Welcome them by sending them a warm message",
13+
time: "1 day ago",
14+
},
15+
];
16+
17+
const NewStudent = () => {
18+
return (
19+
<>
20+
{studentNotifications.map((studentNotification, index) => (
21+
<div
22+
key={index}
23+
className="w-full flex justify-between items-center py-3 border-b-[1px] border-[#2D2E2D] "
24+
>
25+
<div className="flex items-center gap-[18px] ">
26+
<span className=" h-12 w-12 rounded-full bg-[#2D2E2D] flex items-center justify-center ">
27+
<Image
28+
src={studentIcon}
29+
alt="students"
30+
height={100}
31+
width={100}
32+
className="w-6 h-6 object-contain "
33+
/>
34+
</span>
35+
<div>
36+
<h1 className="text-[#CCCCCC] text-base font-medium ">
37+
{" "}
38+
{studentNotification.heading}{" "}
39+
</h1>
40+
<p className="text-[#6E6E6E] text-base font-medium ">
41+
{" "}
42+
{studentNotification.content}{" "}
43+
</p>
44+
</div>
45+
</div>
46+
47+
<p className="text-[#6E6E6E] text-base font-medium ">
48+
{studentNotification.time}
49+
</p>
50+
</div>
51+
))}
52+
</>
53+
);
54+
};
55+
56+
export default NewStudent;

‎src/app/dashboard/tutor/notification/components/Payment.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import Image from "next/image";
2+
import walletIcon from "@/public/img/tutor icon/walletDashboard.svg";
3+
4+
const paymentNotifications = [
5+
{
6+
message: "$15 was paid to your account by 0x411ad3c6abf11",
7+
time: "15 hours ago",
8+
},
9+
{
10+
message: "$150 was paid to your account by 0x411ad3c6abf11",
11+
time: "1 week ago",
12+
},
13+
];
14+
15+
const Payment = () => {
16+
return (
17+
<>
18+
{paymentNotifications.map((paymentNotification, index) => (
19+
<div
20+
key={index}
21+
className="w-full flex justify-between items-center py-3 border-b-[1px] border-[#2D2E2D] "
22+
>
23+
<div className="flex items-center gap-[18px] ">
24+
<span className=" h-12 w-12 rounded-full bg-[#2D2E2D] flex items-center justify-center ">
25+
<Image
26+
src={walletIcon}
27+
alt="students"
28+
height={100}
29+
width={100}
30+
className="w-6 h-6 object-contain "
31+
/>
32+
</span>
33+
<div>
34+
<h1 className="text-[#CCCCCC] text-base font-medium ">
35+
{" "}
36+
{paymentNotification.message}{" "}
37+
</h1>
38+
</div>
39+
</div>
40+
41+
<p className="text-[#6E6E6E] text-base font-medium ">
42+
{paymentNotification.time}
43+
</p>
44+
</div>
45+
))}
46+
</>
47+
);
48+
};
49+
50+
export default Payment;

‎src/app/dashboard/tutor/notification/components/Questions.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import questionIcon from "@/public/questionsimage.svg";
2+
import Image from "next/image";
3+
4+
const questionsNotifications = [
5+
{
6+
image: questionIcon,
7+
time: "15 mins",
8+
category: "Design",
9+
content:
10+
"What videos and materials can you recommend for a beginner started web design",
11+
},
12+
];
13+
14+
const Questions = () => {
15+
return (
16+
<>
17+
{questionsNotifications.map((questionsNotification, index) => (
18+
<div
19+
key={index}
20+
className="w-full flex items-center justify-between py-1 "
21+
>
22+
<div className="flex items-center justify-start gap-[31px]">
23+
<div className=" w-[41px] h-[41px] rounded-full flex items-center justify-center overflow-hidden ">
24+
<Image
25+
src={questionsNotification.image}
26+
alt="students"
27+
height={100}
28+
width={100}
29+
className="w-[41px] h-[41px] object-contain "
30+
/>
31+
</div>
32+
33+
<div className="flex flex-col gap-3 ">
34+
<h4 className="text-[#6E6E6E] text-base font-medium flex items-center">
35+
Asked {questionsNotification.time} mins ago
36+
<div className="bg-[#2F302F] w-[3px] h-4 mx-3"></div>
37+
<span className="text-[#3D5682]">
38+
{" "}
39+
{questionsNotification.category}{" "}
40+
</span>
41+
</h4>
42+
43+
<p className="text-[#CCCCCC] text-base font-medium ">
44+
{questionsNotification.content}{" "}
45+
</p>
46+
</div>
47+
</div>
48+
49+
<button className=" border-[1px] border-[#2D2E2D] rounded-lg py-3 px-[18px] transition duration-200 ease-in-out active:scale-95 text-white font-bold text-sm ">
50+
Answer Question
51+
</button>
52+
</div>
53+
))}
54+
</>
55+
);
56+
};
57+
58+
export default Questions;

‎src/app/dashboard/tutor/notification/notification.tsx‎

Lines changed: 54 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,59 @@
1+
"use client";
2+
3+
import { useState } from "react";
4+
import NewStudent from "./components/NewStudent";
5+
import Questions from "./components/Questions";
6+
import Payment from "./components/Payment";
7+
import Announcements from "./components/Announcements";
8+
9+
const tabs = [
10+
{ id: "new_student", label: "New Student" },
11+
{ id: "questions", label: "Questions" },
12+
{ id: "payment", label: "Payment" },
13+
{ id: "announcements", label: "Announcements" },
14+
] as const;
15+
16+
type TabType = (typeof tabs)[number]["id"];
17+
118
function Notification() {
19+
const [activeTab, setActiveTab] = useState<TabType>("new_student");
20+
21+
const renderComponent = () => {
22+
switch (activeTab) {
23+
case "new_student":
24+
return <NewStudent />;
25+
case "questions":
26+
return <Questions />;
27+
case "payment":
28+
return <Payment />;
29+
case "announcements":
30+
return <Announcements />;
31+
default:
32+
return null;
33+
}
34+
};
35+
236
return (
3-
<div>
4-
<h1>Notification Layout</h1>
37+
<div className=" w-[1000px] h-full mx-auto p-6">
38+
<header className="w-full flex items-center justify-start gap-4">
39+
{tabs.map((tab) => (
40+
<button
41+
key={tab.id}
42+
onClick={() => setActiveTab(tab.id)}
43+
className={`py-2 px-4 text-sm font-medium rounded-full transition-all ${
44+
activeTab === tab.id
45+
? "bg-[#2D2E2D] text-white"
46+
: "bg-[#161716] text-gray-400 hover:text-gray-300"
47+
}`}
48+
>
49+
{tab.label}
50+
</button>
51+
))}
52+
</header>
53+
54+
<div className="text-white flex flex-col gap-3 py-5 px-4">
55+
{renderComponent()}
56+
</div>
557
</div>
658
);
759
}

‎src/public/megaphone-02.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/public/questionsimage.svg‎

Lines changed: 9 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)