}
label="Support"
diff --git a/src/app/dashboard/tutor/courses/courses.tsx b/src/app/dashboard/tutor/courses/courses.tsx
index 52d4863..747466a 100644
--- a/src/app/dashboard/tutor/courses/courses.tsx
+++ b/src/app/dashboard/tutor/courses/courses.tsx
@@ -1,53 +1,53 @@
-import {Addcourse} from "../component/Addcourse";
+import { Addcourse } from "../component/Addcourse";
import CourseCard from "../component/CourseCard";
type courseProps = {
- id: number;
- banner: string;
- title: string;
- enrollment: number;
- rating: number;
- published: boolean;
- videosAvailable: boolean;
+ id: number;
+ banner: string;
+ title: string;
+ enrollment: number;
+ rating: number;
+ published: boolean;
+ videosAvailable: boolean;
};
function Courses() {
- const courses: courseProps[] = [
- {
- id: 1,
- banner: ``,
- title: "Become a web3 Developer:A beginners approach",
- enrollment: 20,
- rating: 4.5,
- published: true,
- videosAvailable: true,
- },
- {
- id: 2,
- banner: ``,
- title: "Become a web3 Developer:A beginners approach",
- enrollment: 15,
- rating: 0,
- published: false,
- videosAvailable: true,
- },
- ];
- return (
-
-
- {courses.map((course) => {
- return ;
- })}
-
-
-
-
-
-
-
-
+ const courses: courseProps[] = [
+ {
+ id: 1,
+ banner: ``,
+ title: "Become a web3 Developer:A beginners approach",
+ enrollment: 20,
+ rating: 4.5,
+ published: true,
+ videosAvailable: true,
+ },
+ {
+ id: 2,
+ banner: ``,
+ title: "Become a web3 Developer:A beginners approach",
+ enrollment: 15,
+ rating: 0,
+ published: false,
+ videosAvailable: true,
+ },
+ ];
+ return (
+
+
+ {courses.map((course) => {
+ return ;
+ })}
+
+
+
- );
+
+
+
+
+
+ );
}
export default Courses;
diff --git a/src/app/dashboard/tutor/earnings/earnings.tsx b/src/app/dashboard/tutor/earnings/earnings.tsx
index 13ef708..a4fc820 100644
--- a/src/app/dashboard/tutor/earnings/earnings.tsx
+++ b/src/app/dashboard/tutor/earnings/earnings.tsx
@@ -1,29 +1,26 @@
"use client";
-import { Percent } from "lucide-react";
-
-
-import {DateActionButton} from "../component/DateActionButton"
-import { EarningStatCard } from '../component/EarningStatCard'
-import { PaymentHistoryTable } from '../component/PaymentHistoryTable'
+import { Percent } from "lucide-react";
+import { DateActionButton } from "../component/DateActionButton";
+import { EarningStatCard } from "../component/EarningStatCard";
+import { PaymentHistoryTable } from "../component/PaymentHistoryTable";
function Earnings() {
const DateActions = [
- {
- label: "All-Time",
- onClick: () => console.log("All-Time clicked"),
- },
- {
- label: "Weekly",
- onClick: () => console.log("Weekly clicked"),
- },
- {
- label: "Monthly",
- onClick: () => console.log("Montly clicked"),
- },
- ]
-
+ {
+ label: "All-Time",
+ onClick: () => console.log("All-Time clicked"),
+ },
+ {
+ label: "Weekly",
+ onClick: () => console.log("Weekly clicked"),
+ },
+ {
+ label: "Monthly",
+ onClick: () => console.log("Montly clicked"),
+ },
+ ];
const stats = [
{
@@ -32,18 +29,29 @@ function Earnings() {
icon:
,
bgCol: "bg-blue-500",
},
-
-
];
const transactions = [
- { id: 1, transactionId: "0xe46d0b1039a8f97df2800...", amount: "$15", date: "12th Jan, 2025" },
- { id: 2, transactionId: "0xe46d0b1039a8f97df2800...", amount: "$15", date: "12th Jan, 2025" },
- { id: 3, transactionId: "0xe46d0b1039a8f97df2800...", amount: "$15", date: "12th Jan, 2025" },
+ {
+ id: 1,
+ transactionId: "0xe46d0b1039a8f97df2800...",
+ amount: "$15",
+ date: "12th Jan, 2025",
+ },
+ {
+ id: 2,
+ transactionId: "0xe46d0b1039a8f97df2800...",
+ amount: "$15",
+ date: "12th Jan, 2025",
+ },
+ {
+ id: 3,
+ transactionId: "0xe46d0b1039a8f97df2800...",
+ amount: "$15",
+ date: "12th Jan, 2025",
+ },
];
-
-
return (
@@ -62,7 +70,6 @@ function Earnings() {
);
}
diff --git a/src/app/dashboard/tutor/layout.tsx b/src/app/dashboard/tutor/layout.tsx
index 52f2a68..772da4a 100644
--- a/src/app/dashboard/tutor/layout.tsx
+++ b/src/app/dashboard/tutor/layout.tsx
@@ -1,14 +1,35 @@
+"use client";
+
+import { useState } from "react";
import Header from "./component/DashboardHeader";
import { Sidebar } from "./component/TutorDashboardSidebar";
import DashBoardContextProvider from "@/app/useContext/dashboardContext";
+import { Logs } from "lucide-react";
const Layout = ({ children }: { children: React.ReactNode }) => {
+ const [isSidebarOpen, setIsSidebarOpen] = useState(false);
return (
-
+
+ setIsSidebarOpen(!isSidebarOpen)}
+ className="md:hidden px-8"
+ >
+
+
-
+ {isSidebarOpen && (
+
+ )}
+
+
{children}
diff --git a/src/app/dashboard/tutor/notification/components/Announcements.tsx b/src/app/dashboard/tutor/notification/components/Announcements.tsx
index fac5a85..8c423dd 100644
--- a/src/app/dashboard/tutor/notification/components/Announcements.tsx
+++ b/src/app/dashboard/tutor/notification/components/Announcements.tsx
@@ -23,7 +23,7 @@ const Announcements = () => {
className="w-full flex justify-between items-center p-6 bg-[#161716] rounded-lg "
>
-
+
{
/>
-
+
{" "}
{announcementNotification.heading}{" "}
-
+
{" "}
{announcementNotification.message}{" "}
diff --git a/src/app/dashboard/tutor/notification/components/NewStudent.tsx b/src/app/dashboard/tutor/notification/components/NewStudent.tsx
index 986e280..d77a0bc 100644
--- a/src/app/dashboard/tutor/notification/components/NewStudent.tsx
+++ b/src/app/dashboard/tutor/notification/components/NewStudent.tsx
@@ -20,31 +20,29 @@ const NewStudent = () => {
{studentNotifications.map((studentNotification, index) => (
-
-
+
+
-
- {" "}
- {studentNotification.heading}{" "}
+
+ {studentNotification.heading}
-
- {" "}
- {studentNotification.content}{" "}
+
+ {studentNotification.content}
+
{studentNotification.time}
diff --git a/src/app/dashboard/tutor/notification/components/Payment.tsx b/src/app/dashboard/tutor/notification/components/Payment.tsx
index 889ab48..6fa5fc5 100644
--- a/src/app/dashboard/tutor/notification/components/Payment.tsx
+++ b/src/app/dashboard/tutor/notification/components/Payment.tsx
@@ -18,10 +18,10 @@ const Payment = () => {
{paymentNotifications.map((paymentNotification, index) => (
-
+
{
/>
-
+
{" "}
{paymentNotification.message}{" "}
-
+
{paymentNotification.time}
diff --git a/src/app/dashboard/tutor/notification/components/Questions.tsx b/src/app/dashboard/tutor/notification/components/Questions.tsx
index 67310d2..9250c15 100644
--- a/src/app/dashboard/tutor/notification/components/Questions.tsx
+++ b/src/app/dashboard/tutor/notification/components/Questions.tsx
@@ -3,49 +3,68 @@ import Image from "next/image";
import Link from "next/link";
const questionsNotifications = [
- {
- image: questionIcon,
- time: "15 mins",
- category: "Design",
- content: "What videos and materials can you recommend for a beginner started web design",
- },
- {
- image: questionIcon,
- time: "15 mins",
- category: "Design",
- content: "What videos and materials can you recommend for a beginner started web design",
- },
+ {
+ image: questionIcon,
+ time: "15 mins",
+ category: "Design",
+ content:
+ "What videos and materials can you recommend for a beginner started web design",
+ },
+ {
+ image: questionIcon,
+ time: "15 mins",
+ category: "Design",
+ content:
+ "What videos and materials can you recommend for a beginner started web design",
+ },
];
const Questions = () => {
- return (
- <>
- {questionsNotifications.map((questionsNotification, index) => (
-
-
-
-
-
+ return (
+ <>
+ {questionsNotifications.map((questionsNotification, index) => (
+
+
+
+
+
-
-
- Asked {questionsNotification.time} mins ago
-
- {questionsNotification.category}
-
+
+
+ Asked {questionsNotification.time} ago
+
+
+ {questionsNotification.category}
+
+
-
{questionsNotification.content}
-
-
-
-
-
+
+ {questionsNotification.content}
+
- ))}
-
- );
+
+
+
+
+
+
+ ))}
+
+ );
};
export default Questions;
diff --git a/src/app/dashboard/tutor/notification/notification.tsx b/src/app/dashboard/tutor/notification/notification.tsx
index 9849a8d..f76f025 100644
--- a/src/app/dashboard/tutor/notification/notification.tsx
+++ b/src/app/dashboard/tutor/notification/notification.tsx
@@ -1,57 +1,61 @@
"use client";
-import {useState} from "react";
+import { useState } from "react";
import NewStudent from "./components/NewStudent";
import Questions from "./components/Questions";
import Payment from "./components/Payment";
import Announcements from "./components/Announcements";
const tabs = [
- {id: "new_student", label: "New Student"},
- {id: "questions", label: "Questions"},
- {id: "payment", label: "Payment"},
- {id: "announcements", label: "Announcements"},
+ { id: "new_student", label: "New Student" },
+ { id: "questions", label: "Questions" },
+ { id: "payment", label: "Payment" },
+ { id: "announcements", label: "Announcements" },
] as const;
type TabType = (typeof tabs)[number]["id"];
function Notification() {
- const [activeTab, setActiveTab] = useState
("new_student");
-
- const renderComponent = () => {
- switch (activeTab) {
- case "new_student":
- return ;
- case "questions":
- return ;
- case "payment":
- return ;
- case "announcements":
- return ;
- default:
- return null;
- }
- };
-
- return (
-
-
- {tabs.map((tab) => (
-
- ))}
-
-
-
{renderComponent()}
+ const [activeTab, setActiveTab] = useState
("new_student");
+
+ const renderComponent = () => {
+ switch (activeTab) {
+ case "new_student":
+ return ;
+ case "questions":
+ return ;
+ case "payment":
+ return ;
+ case "announcements":
+ return ;
+ default:
+ return null;
+ }
+ };
+
+ return (
+
+
+ {tabs.map((tab) => (
+
+ ))}
+
+
+
+ {renderComponent()}
- );
+
-
-
+ return (
+
+
+
+
{
className="object-cover"
/>
-
-
+
Miss Flora Osatuyi
-
Product Designer
+
+ Product Designer
+
-
+
+
+
+ Flora is a talented product designer with 3+ years of experience
+ creating functional, visually polished (FPV) designs. She also tutors
+ aspiring designers, simplifying UI and product design concepts through
+ hands-on learning. Passionate about blending creativity and usability,
+ Flora helps her students and projects thrive in today’s fast-paced
+ digital world.
+
+
+
+
+ Courses Offered
+
+
+
+
+
+
+
+
+
+ Design made simple
+
+
+ Video/Note guides available
+
+
+
+ Published
+
+
+
+
+ Enrollment:
+ 20 Learners{" "}
+
+
+ Rating:
+ 4.5/5{" "}
+
+
-
-
-
-
-
-
-
Flora is a talented product designer with 3+ years of experience creating functional, visually polished (FPV) designs. She also tutors aspiring designers, simplifying UI and product design concepts through hands-on learning. Passionate about blending creativity and usability, Flora helps her students and projects thrive in today’s fast-paced digital world.
-
-
-
Courses Offered
-
-
-
-
-
-
-
-
-
-
-
-
Design made simple
-
Video/Note guides available
+
-
Published
-
-
-
Enrollment:
- 20 Learners
-
Rating:
- 4.5/5
-
-
-
-
-
-
-
-
-
Reviews
+
+
Reviews
-
-
-
-
+
+
+
+
+
+
+
Benedict
+
+
+ The course is a must take for anyone looking to start their
+ tech journey in design. A solid 5/5 rating for me
+
+
+ Rating:
+ 5/5{" "}
+
+
+
+
+
-
-
Benedict
-
-
The course is a must take for anyone looking to start their tech journey in design. A solid 5/5 rating for me
-
Rating:
- 5/5
-
-
-
-
-
-
-
-
-
-
-
-
- )
+
+ );
};
export default Profile;
diff --git a/src/app/dashboard/tutor/question/components/Chats.tsx b/src/app/dashboard/tutor/question/components/Chats.tsx
index 5bcc28d..e748bd7 100644
--- a/src/app/dashboard/tutor/question/components/Chats.tsx
+++ b/src/app/dashboard/tutor/question/components/Chats.tsx
@@ -2,56 +2,78 @@ import React from "react";
import more from "@/public/more.svg";
import tick from "@/public/tick.svg";
import Image from "next/image";
-const Chats = () => {
- const chats = [
- {
- image: "",
- time: "friday",
- from: "Josh",
- content: "What videos and materials can you recommend for a beginner started web design",
- },
- // {
- // image: "",
- // time: "friday",
- // from: "Josh",
- // content: "What videos and materials can you recommend for a beginner started web design",
- // },
- ];
- return (
-
-
Questions
-
-
-
-
-
- {chats.map((items, index) => {
- return (
- -
-
-
-
- {items.from}
- {items.time}
-
-
-
-
-
-
- {items.content.slice(0, 25)}...
-
-
-
-
- );
- })}
-
+import { X } from "lucide-react";
+import Link from "next/link";
+
+interface ChatsProps {
+ onChatSelect?: () => void;
+}
+
+const Chats: React.FC
= ({ onChatSelect }) => {
+ const chats = [
+ {
+ image: "",
+ time: "friday",
+ from: "Josh",
+ content:
+ "What videos and materials can you recommend for a beginner started web design",
+ },
+ // Additional chat items can be added here
+ ];
+
+ return (
+
+
- );
+
+
+
+
+
+
+ {chats.map((item, index) => {
+ return (
+ -
+
+
+
+
+ {item.from}
+
+
+ {item.time}
+
+
+
+
+
+
+
+ {item.content.length > 25
+ ? `${item.content.slice(0, 25)}...`
+ : item.content}
+
+
+
+
+ );
+ })}
+
+
-
-
-
-
-
+import { ArrowLeft, SearchIcon } from "lucide-react";
+
+interface HeaderProps {
+ onBackClick?: () => void;
+}
+
+const Header: React.FC
= ({ onBackClick }) => {
+ return (
+
+ );
};
export default Header;
diff --git a/src/app/dashboard/tutor/question/components/MessageContainer.tsx b/src/app/dashboard/tutor/question/components/MessageContainer.tsx
index f3c1636..a196b90 100644
--- a/src/app/dashboard/tutor/question/components/MessageContainer.tsx
+++ b/src/app/dashboard/tutor/question/components/MessageContainer.tsx
@@ -1,16 +1,24 @@
-import {ReactNode} from "react";
+import { ReactNode } from "react";
interface MessageinProps {
- children: ReactNode;
+ children: ReactNode;
}
interface MessageoutProps {
- children: ReactNode;
+ children: ReactNode;
}
-export const MessageIn: React.FC = ({children}) => {
- return {children}
;
+export const MessageIn: React.FC = ({ children }) => {
+ return (
+
+ {children}
+
+ );
};
-export const Messageout: React.FC = ({children}) => {
- return {children}
;
+export const Messageout: React.FC = ({ children }) => {
+ return (
+
+ {children}
+
+ );
};
diff --git a/src/app/dashboard/tutor/question/components/Replies.tsx b/src/app/dashboard/tutor/question/components/Replies.tsx
index 0f92c3b..8a358ba 100644
--- a/src/app/dashboard/tutor/question/components/Replies.tsx
+++ b/src/app/dashboard/tutor/question/components/Replies.tsx
@@ -5,52 +5,60 @@ import vn from "@/public/vn.svg";
import send from "@/public/send.svg";
import smile from "@/public/smile.svg";
import tick from "@/public/tick.svg";
-import {MessageIn, Messageout} from "./MessageContainer";
+import { MessageIn, Messageout } from "./MessageContainer";
-const Replies = () => {
- return (
-
-
-
-
-
- hello how are you doing{" "}
-
-
- 12:43 AM
-
-
-
- hello
-
-
- 12:43 AM
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+interface RepliesProps {
+ onBackClick?: () => void;
+}
+
+const Replies: React.FC
= ({ onBackClick }) => {
+ return (
+
+
+
+
+
+
+ hello how are you doing{" "}
+
+
+ 12:43 AM
+
+
+
+ hello
+
+
+ 12:43 AM
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- );
+
-
-
+const Page = () => {
+ const [showChat, setShowChat] = useState(true);
+
+ return (
+
+
+ setShowChat(false)} />
+
+
+ setShowChat(true)} />
- );
+
+ );
};
-export default page;
+export default Page;
diff --git a/src/app/dashboard/tutor/students/students.tsx b/src/app/dashboard/tutor/students/students.tsx
index a2a0a47..d2c660b 100644
--- a/src/app/dashboard/tutor/students/students.tsx
+++ b/src/app/dashboard/tutor/students/students.tsx
@@ -1,8 +1,8 @@
-'use client'
-import React from 'react';
-import Image from 'next/image';
-import UserAvatar_Ben from "../../../../public/img/studentProfile.svg"
-import UserAvatar_Flora from "../../../../public/img/dashboardProfile.svg"
+"use client";
+import React from "react";
+import Image from "next/image";
+import UserAvatar_Ben from "../../../../public/img/studentProfile.svg";
+import UserAvatar_Flora from "../../../../public/img/dashboardProfile.svg";
interface Student {
id: string;
@@ -23,47 +23,49 @@ interface StudentReview {
function Student() {
const students: Student[] = [
{
- id: '1',
- name: 'Tony Oluyi',
- course: 'Product Design',
- email: 'Tony@gmail.com',
+ id: "1",
+ name: "Tony Oluyi",
+ course: "Product Design",
+ email: "Tony@gmail.com",
progress: 50,
},
{
- id: '2',
- name: 'Flora Osatuayi',
- course: 'Product Design',
- email: 'Flora@gmail.com',
+ id: "2",
+ name: "Flora Osatuayi",
+ course: "Product Design",
+ email: "Flora@gmail.com",
progress: 20,
},
{
- id: '3',
- name: 'Ejembi Benedict',
- course: 'Product Design',
- email: 'Ejembi@gmail.com',
+ id: "3",
+ name: "Ejembi Benedict",
+ course: "Product Design",
+ email: "Ejembi@gmail.com",
progress: 70,
},
];
const reviews: StudentReview[] = [
{
- id: '1',
- name: 'Benedict',
+ id: "1",
+ name: "Benedict",
avatar: UserAvatar_Ben,
- review: 'The course is a must take for anyone looking to start their tech journey in design. A solid 5/5 rating for me',
+ review:
+ "The course is a must take for anyone looking to start their tech journey in design. A solid 5/5 rating for me",
rating: 5,
},
{
- id: '2',
- name: 'Flora',
+ id: "2",
+ name: "Flora",
avatar: UserAvatar_Flora,
- review: 'The course is a must take for anyone looking to start their tech journey in design. A solid 5/5 rating for me',
+ review:
+ "The course is a must take for anyone looking to start their tech journey in design. A solid 5/5 rating for me",
rating: 5,
},
];
return (
-
+
{/* Students Table */}
@@ -71,18 +73,35 @@ function Student() {
| Name |
- Courses |
- Email Address |
- Progress |
+
+ Courses
+ |
+
+ Email Address
+ |
+
+ Progress
+ |
{students.map((student) => (
-
- | {student.name} |
- {student.course} |
- {student.email} |
- {student.progress}% |
+
+ |
+ {student.name}
+ |
+
+ {student.course}
+ |
+
+ {student.email}
+ |
+
+ {student.progress}%
+ |
))}
@@ -90,21 +109,34 @@ function Student() {
{/* Reviews Section */}
-
+
Students Reviews
-
+
{reviews.map((review) => (
-
+
-
+
{review.name}
-
{review.review}
+
+ {review.review}
+
Rating:
-
{review.rating}/{review.rating}
+
+ {review.rating}/{review.rating}
+
))}
@@ -113,6 +145,6 @@ function Student() {
);
-};
+}
-export default Student;
\ No newline at end of file
+export default Student;
diff --git a/src/app/dashboard/tutor/support/support.tsx b/src/app/dashboard/tutor/support/support.tsx
index c9317ff..70c5fbf 100644
--- a/src/app/dashboard/tutor/support/support.tsx
+++ b/src/app/dashboard/tutor/support/support.tsx
@@ -1,7 +1,7 @@
function Support() {
return (
-
Support Layout
+ Support Layouts
);
}
diff --git a/src/app/dashboard/tutor/tutor/tutor.tsx b/src/app/dashboard/tutor/tutor/tutor.tsx
index c682a87..f283394 100644
--- a/src/app/dashboard/tutor/tutor/tutor.tsx
+++ b/src/app/dashboard/tutor/tutor/tutor.tsx
@@ -36,21 +36,21 @@ const stats = [
const quickActions = [
{
label: "Create Course",
- onClick: () => console.log("Create Course clicked"),
+ sectionName: "courses",
},
{
label: "Viewing Earnings",
- onClick: () => console.log("Viewing Earnings clicked"),
+ sectionName: "earnings",
},
{
label: "Student Feedback",
- onClick: () => console.log("Student Feedback clicked"),
+ sectionName: "students",
},
];
export default function Tutor() {
return (
-
+
{stats.map((stat, index) => (
@@ -60,7 +60,11 @@ export default function Tutor() {
Quick Actions
{quickActions.map((action, index) => (
-
+
))}
diff --git a/src/app/globals.css b/src/app/globals.css
index e614c57..86369e8 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -107,15 +107,15 @@
* {
@apply border-border;
}
-body {
- color: rgb(var(--foreground-rgb));
- background: linear-gradient(
- to bottom,
- transparent,
- rgb(var(--background-end-rgb))
- )
- rgb(var(--background-start-rgb));
-}
+ body {
+ color: rgb(var(--foreground-rgb));
+ background: linear-gradient(
+ to bottom,
+ transparent,
+ rgb(var(--background-end-rgb))
+ )
+ rgb(var(--background-start-rgb));
+ }
}
/* Firefox */
@@ -140,9 +140,7 @@ body {
border: 3px solid var(--primary);
}
-
.scrollbar-hide {
scrollbar-width: none;
-ms-overflow-style: none;
}
-