From ec417278cb17bb619bdfa406f5cb243e667ddd6c Mon Sep 17 00:00:00 2001 From: Dasha Date: Sun, 8 Feb 2026 13:42:32 +0100 Subject: [PATCH 1/2] changed svg on react components icons, changed style name folders kebab on camelCase --- client/src/assets/icons/Menu Button.svg | 6 --- client/src/assets/icons/cross.svg | 10 ----- .../src/assets/icons/home-section1-icon.svg | 3 -- .../src/assets/icons/home-section1-icon2.svg | 3 -- .../src/assets/icons/home-section1-icon3.svg | 3 -- client/src/assets/icons/reviews.svg | 3 -- .../clientsDashboard/MyLessonsSection.tsx | 2 +- .../TopBar.tsx | 0 .../Features/FeatureCard.tsx | 6 ++- .../Features/Features.tsx | 12 +++--- .../Hero/Hero.tsx | 0 .../OurClients/ourClients.tsx | 0 .../PopularSubjects/PopularSubjects.tsx | 0 .../PopularSubjects/SubjectCard.tsx | 0 .../Reviews/ReviewCardHome.tsx | 8 +--- .../Reviews/ReviewsHome.tsx | 0 client/src/components/icons/Appointments.tsx | 38 +++++++++++++++++++ client/src/components/icons/Cross.tsx | 38 +++++++++++++++++++ .../src/components/icons/HomeSection1Icon.tsx | 35 +++++++++++++++++ .../components/icons/HomeSection1Icon2.tsx | 36 ++++++++++++++++++ .../components/icons/HomeSection1Icon3.tsx | 36 ++++++++++++++++++ client/src/components/icons/Menu-button.tsx | 34 +++++++++++++++++ client/src/components/icons/Reviews.tsx | 35 +++++++++++++++++ .../{page-title => pageTitle}/PageTitle.tsx | 0 .../teacherDashboard/MyLessonsSection.tsx | 2 +- .../Reviews/ReviewCardTeacher.tsx | 8 +--- .../Reviews/ReviewsTeacher.tsx | 0 .../teacherAbout/teacherAbout.tsx | 0 .../teacherNavigation/TeacherNavigation.tsx | 0 .../teacherSchedule/Calendar/Calendar.tsx | 0 .../teacherSchedule/TeacherSchedule.tsx | 0 .../teacherSchedule/Time/Time.tsx | 0 .../teacherSubjects/teacherSubjects.tsx | 0 .../components/ui/mobileMenu/MobileMenu.tsx | 8 ++-- .../pages/ClientsClasses/ClientsClasses.tsx | 4 +- .../ClientsDashboard/ClientsDashboard.tsx | 2 +- .../pages/clientsBilling/ClientsBilling.tsx | 2 +- client/src/pages/home/Home.tsx | 10 ++--- .../teacherDashboard/TeacherDashboard.tsx | 2 +- .../src/pages/teacherDetail/teacherDetail.tsx | 10 ++--- 40 files changed, 287 insertions(+), 69 deletions(-) delete mode 100644 client/src/assets/icons/Menu Button.svg delete mode 100644 client/src/assets/icons/cross.svg delete mode 100644 client/src/assets/icons/home-section1-icon.svg delete mode 100644 client/src/assets/icons/home-section1-icon2.svg delete mode 100644 client/src/assets/icons/home-section1-icon3.svg delete mode 100644 client/src/assets/icons/reviews.svg rename client/src/components/{header-private => headerPrivate}/TopBar.tsx (100%) rename client/src/components/{home-section => homeSection}/Features/FeatureCard.tsx (87%) rename client/src/components/{home-section => homeSection}/Features/Features.tsx (87%) rename client/src/components/{home-section => homeSection}/Hero/Hero.tsx (100%) rename client/src/components/{home-section => homeSection}/OurClients/ourClients.tsx (100%) rename client/src/components/{home-section => homeSection}/PopularSubjects/PopularSubjects.tsx (100%) rename client/src/components/{home-section => homeSection}/PopularSubjects/SubjectCard.tsx (100%) rename client/src/components/{home-section => homeSection}/Reviews/ReviewCardHome.tsx (81%) rename client/src/components/{home-section => homeSection}/Reviews/ReviewsHome.tsx (100%) create mode 100644 client/src/components/icons/Appointments.tsx create mode 100644 client/src/components/icons/Cross.tsx create mode 100644 client/src/components/icons/HomeSection1Icon.tsx create mode 100644 client/src/components/icons/HomeSection1Icon2.tsx create mode 100644 client/src/components/icons/HomeSection1Icon3.tsx create mode 100644 client/src/components/icons/Menu-button.tsx create mode 100644 client/src/components/icons/Reviews.tsx rename client/src/components/{page-title => pageTitle}/PageTitle.tsx (100%) rename client/src/components/{teacher-section => teacherSection}/Reviews/ReviewCardTeacher.tsx (81%) rename client/src/components/{teacher-section => teacherSection}/Reviews/ReviewsTeacher.tsx (100%) rename client/src/components/{teacher-section => teacherSection}/teacherAbout/teacherAbout.tsx (100%) rename client/src/components/{teacher-section => teacherSection}/teacherNavigation/TeacherNavigation.tsx (100%) rename client/src/components/{teacher-section => teacherSection}/teacherSchedule/Calendar/Calendar.tsx (100%) rename client/src/components/{teacher-section => teacherSection}/teacherSchedule/TeacherSchedule.tsx (100%) rename client/src/components/{teacher-section => teacherSection}/teacherSchedule/Time/Time.tsx (100%) rename client/src/components/{teacher-section => teacherSection}/teacherSubjects/teacherSubjects.tsx (100%) diff --git a/client/src/assets/icons/Menu Button.svg b/client/src/assets/icons/Menu Button.svg deleted file mode 100644 index cd7606a..0000000 --- a/client/src/assets/icons/Menu Button.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/client/src/assets/icons/cross.svg b/client/src/assets/icons/cross.svg deleted file mode 100644 index 54aa8e4..0000000 --- a/client/src/assets/icons/cross.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/client/src/assets/icons/home-section1-icon.svg b/client/src/assets/icons/home-section1-icon.svg deleted file mode 100644 index 502b590..0000000 --- a/client/src/assets/icons/home-section1-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/client/src/assets/icons/home-section1-icon2.svg b/client/src/assets/icons/home-section1-icon2.svg deleted file mode 100644 index 51e23c6..0000000 --- a/client/src/assets/icons/home-section1-icon2.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/client/src/assets/icons/home-section1-icon3.svg b/client/src/assets/icons/home-section1-icon3.svg deleted file mode 100644 index fb5aed9..0000000 --- a/client/src/assets/icons/home-section1-icon3.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/client/src/assets/icons/reviews.svg b/client/src/assets/icons/reviews.svg deleted file mode 100644 index 2d949c4..0000000 --- a/client/src/assets/icons/reviews.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/client/src/components/clientsDashboard/MyLessonsSection.tsx b/client/src/components/clientsDashboard/MyLessonsSection.tsx index bc70c4a..4ed0e44 100644 --- a/client/src/components/clientsDashboard/MyLessonsSection.tsx +++ b/client/src/components/clientsDashboard/MyLessonsSection.tsx @@ -1,6 +1,6 @@ import LessonsTable from "../table/LessonsTable"; import { Calendar } from "../calendar/Calendar"; -import { PageTitle } from "../page-title/PageTitle"; +import { PageTitle } from "../pageTitle/PageTitle"; import { FindTeachersCard } from "./FindTeachersCard"; export const MyLessonsSection = () => { diff --git a/client/src/components/header-private/TopBar.tsx b/client/src/components/headerPrivate/TopBar.tsx similarity index 100% rename from client/src/components/header-private/TopBar.tsx rename to client/src/components/headerPrivate/TopBar.tsx diff --git a/client/src/components/home-section/Features/FeatureCard.tsx b/client/src/components/homeSection/Features/FeatureCard.tsx similarity index 87% rename from client/src/components/home-section/Features/FeatureCard.tsx rename to client/src/components/homeSection/Features/FeatureCard.tsx index a8a0349..4126751 100644 --- a/client/src/components/home-section/Features/FeatureCard.tsx +++ b/client/src/components/homeSection/Features/FeatureCard.tsx @@ -1,5 +1,7 @@ +import React from "react"; + interface FeatureCardProps { - icon: string; + icon: React.ReactNode; title: string; description: string; className?: string; @@ -14,7 +16,7 @@ export const FeatureCard = ({ return (
- {title} + {icon}

{title}

diff --git a/client/src/components/home-section/Features/Features.tsx b/client/src/components/homeSection/Features/Features.tsx similarity index 87% rename from client/src/components/home-section/Features/Features.tsx rename to client/src/components/homeSection/Features/Features.tsx index 4b09213..dea2d82 100644 --- a/client/src/components/home-section/Features/Features.tsx +++ b/client/src/components/homeSection/Features/Features.tsx @@ -1,24 +1,24 @@ import { FeatureCard } from "./FeatureCard"; import { Button } from "../../ui/button/Button"; -import icon1 from "../../../assets/icons/home-section1-icon.svg"; -import icon2 from "../../../assets/icons/home-section1-icon2.svg"; -import icon3 from "../../../assets/icons/home-section1-icon3.svg"; +import HomeSection1Icon from "../../icons/HomeSection1Icon"; +import HomeSection1Icon2 from "../../icons/HomeSection1Icon2"; +import HomeSection1Icon3 from "../../icons/HomeSection1Icon3"; const features = [ { - icon: icon1, + icon: , title: "Trusted tutors", description: "All tutors are carefully selected and verified to ensure high teaching quality and a safe learning experience.", }, { - icon: icon2, + icon: , title: "Simple process", description: "Find a tutor, book a session, and start learning in just a few clicks – no complicated steps or confusion.", }, { - icon: icon3, + icon: , title: "Real results", description: "Students see progress faster thanks to focused sessions and tutors who know how to explain things clearly.", diff --git a/client/src/components/home-section/Hero/Hero.tsx b/client/src/components/homeSection/Hero/Hero.tsx similarity index 100% rename from client/src/components/home-section/Hero/Hero.tsx rename to client/src/components/homeSection/Hero/Hero.tsx diff --git a/client/src/components/home-section/OurClients/ourClients.tsx b/client/src/components/homeSection/OurClients/ourClients.tsx similarity index 100% rename from client/src/components/home-section/OurClients/ourClients.tsx rename to client/src/components/homeSection/OurClients/ourClients.tsx diff --git a/client/src/components/home-section/PopularSubjects/PopularSubjects.tsx b/client/src/components/homeSection/PopularSubjects/PopularSubjects.tsx similarity index 100% rename from client/src/components/home-section/PopularSubjects/PopularSubjects.tsx rename to client/src/components/homeSection/PopularSubjects/PopularSubjects.tsx diff --git a/client/src/components/home-section/PopularSubjects/SubjectCard.tsx b/client/src/components/homeSection/PopularSubjects/SubjectCard.tsx similarity index 100% rename from client/src/components/home-section/PopularSubjects/SubjectCard.tsx rename to client/src/components/homeSection/PopularSubjects/SubjectCard.tsx diff --git a/client/src/components/home-section/Reviews/ReviewCardHome.tsx b/client/src/components/homeSection/Reviews/ReviewCardHome.tsx similarity index 81% rename from client/src/components/home-section/Reviews/ReviewCardHome.tsx rename to client/src/components/homeSection/Reviews/ReviewCardHome.tsx index 1611274..443d6ec 100644 --- a/client/src/components/home-section/Reviews/ReviewCardHome.tsx +++ b/client/src/components/homeSection/Reviews/ReviewCardHome.tsx @@ -1,4 +1,4 @@ -import reviewsIcon from "../../../assets/icons/reviews.svg"; +import ReviewsIcon from "../../icons/Reviews"; interface ReviewCardProps { avatar: string; @@ -28,11 +28,7 @@ export const ReviewCardHome = ({

{course}

- +

{review}

diff --git a/client/src/components/home-section/Reviews/ReviewsHome.tsx b/client/src/components/homeSection/Reviews/ReviewsHome.tsx similarity index 100% rename from client/src/components/home-section/Reviews/ReviewsHome.tsx rename to client/src/components/homeSection/Reviews/ReviewsHome.tsx diff --git a/client/src/components/icons/Appointments.tsx b/client/src/components/icons/Appointments.tsx new file mode 100644 index 0000000..b200214 --- /dev/null +++ b/client/src/components/icons/Appointments.tsx @@ -0,0 +1,38 @@ +import React from "react"; + +interface AppointmentsProps { + width?: number; + height?: number; + fill?: string; + className?: string; +} + +const Appointments: React.FC = ({ + width = 24, + height = 24, + fill = "#474747", + className = "", +}) => ( + + + + + + + + + + +); + +export default Appointments; diff --git a/client/src/components/icons/Cross.tsx b/client/src/components/icons/Cross.tsx new file mode 100644 index 0000000..50f6346 --- /dev/null +++ b/client/src/components/icons/Cross.tsx @@ -0,0 +1,38 @@ +import React from "react"; + +interface CrossProps { + width?: number; + height?: number; + fill?: string; + className?: string; +} + +const Cross: React.FC = ({ + width = 24, + height = 24, + fill = "white", + className = "", +}) => ( + + + + + + + + + + +); + +export default Cross; diff --git a/client/src/components/icons/HomeSection1Icon.tsx b/client/src/components/icons/HomeSection1Icon.tsx new file mode 100644 index 0000000..80bf26b --- /dev/null +++ b/client/src/components/icons/HomeSection1Icon.tsx @@ -0,0 +1,35 @@ +import React from "react"; + +interface HomeSection1IconProps { + width?: number; + height?: number; + fill?: string; + className?: string; +} + +const HomeSection1Icon: React.FC = ({ + width = 41, + height = 36, + fill = "#7F56D9", + className = "", +}) => { + return ( + + + + ); +}; + +export default HomeSection1Icon; diff --git a/client/src/components/icons/HomeSection1Icon2.tsx b/client/src/components/icons/HomeSection1Icon2.tsx new file mode 100644 index 0000000..20a0bae --- /dev/null +++ b/client/src/components/icons/HomeSection1Icon2.tsx @@ -0,0 +1,36 @@ +import { + type Ref, + type SVGProps, + forwardRef, + memo, + type MemoExoticComponent, + type ForwardRefExoticComponent, +} from "react"; + +const SvgComponent = ( + props: SVGProps, + ref: Ref, +) => ( + + + +); + +const HomeSection1Icon2 = memo(forwardRef(SvgComponent)) as MemoExoticComponent< + ForwardRefExoticComponent> +>; + +export default HomeSection1Icon2; diff --git a/client/src/components/icons/HomeSection1Icon3.tsx b/client/src/components/icons/HomeSection1Icon3.tsx new file mode 100644 index 0000000..2fa3b8d --- /dev/null +++ b/client/src/components/icons/HomeSection1Icon3.tsx @@ -0,0 +1,36 @@ +import { + type Ref, + type SVGProps, + forwardRef, + memo, + type MemoExoticComponent, + type ForwardRefExoticComponent, +} from "react"; + +const SvgComponent = ( + props: SVGProps, + ref: Ref, +) => ( + + + +); + +const HomeSection1Icon3 = memo(forwardRef(SvgComponent)) as MemoExoticComponent< + ForwardRefExoticComponent> +>; + +export default HomeSection1Icon3; diff --git a/client/src/components/icons/Menu-button.tsx b/client/src/components/icons/Menu-button.tsx new file mode 100644 index 0000000..2f779df --- /dev/null +++ b/client/src/components/icons/Menu-button.tsx @@ -0,0 +1,34 @@ +import { + type Ref, + type SVGProps, + forwardRef, + memo, + type MemoExoticComponent, + type ForwardRefExoticComponent, +} from "react"; + +const SvgComponent = ( + props: SVGProps, + ref: Ref, +) => ( + + + + + + +); + +const MenuButtonIcon = memo(forwardRef(SvgComponent)) as MemoExoticComponent< + ForwardRefExoticComponent> +>; + +export default MenuButtonIcon; diff --git a/client/src/components/icons/Reviews.tsx b/client/src/components/icons/Reviews.tsx new file mode 100644 index 0000000..31f4f0b --- /dev/null +++ b/client/src/components/icons/Reviews.tsx @@ -0,0 +1,35 @@ +import { + type Ref, + type SVGProps, + forwardRef, + memo, + type MemoExoticComponent, + type ForwardRefExoticComponent, +} from "react"; + +const SvgComponent = ( + props: SVGProps, + ref: Ref, +) => ( + + + +); + +const ReviewsIcon = memo(forwardRef(SvgComponent)) as MemoExoticComponent< + ForwardRefExoticComponent> +>; + +export default ReviewsIcon; diff --git a/client/src/components/page-title/PageTitle.tsx b/client/src/components/pageTitle/PageTitle.tsx similarity index 100% rename from client/src/components/page-title/PageTitle.tsx rename to client/src/components/pageTitle/PageTitle.tsx diff --git a/client/src/components/teacherDashboard/MyLessonsSection.tsx b/client/src/components/teacherDashboard/MyLessonsSection.tsx index d858352..e30552c 100644 --- a/client/src/components/teacherDashboard/MyLessonsSection.tsx +++ b/client/src/components/teacherDashboard/MyLessonsSection.tsx @@ -1,6 +1,6 @@ import LessonsTable from "../table/LessonsTable"; import { Calendar } from "../calendar/Calendar"; -import { PageTitle } from "../page-title/PageTitle"; +import { PageTitle } from "../pageTitle/PageTitle"; import { NumberOfStudentsCard } from "./NumberOfStudentsCard"; export const MyLessonsSection = () => { diff --git a/client/src/components/teacher-section/Reviews/ReviewCardTeacher.tsx b/client/src/components/teacherSection/Reviews/ReviewCardTeacher.tsx similarity index 81% rename from client/src/components/teacher-section/Reviews/ReviewCardTeacher.tsx rename to client/src/components/teacherSection/Reviews/ReviewCardTeacher.tsx index a666339..9a7213a 100644 --- a/client/src/components/teacher-section/Reviews/ReviewCardTeacher.tsx +++ b/client/src/components/teacherSection/Reviews/ReviewCardTeacher.tsx @@ -1,4 +1,4 @@ -import reviewsIcon from "../../../assets/icons/reviews.svg"; +import ReviewsIcon from "../../icons/Reviews"; interface ReviewCardProps { avatar: string; @@ -32,11 +32,7 @@ export const ReviewCardTeacher = ({

- +

diff --git a/client/src/components/teacher-section/Reviews/ReviewsTeacher.tsx b/client/src/components/teacherSection/Reviews/ReviewsTeacher.tsx similarity index 100% rename from client/src/components/teacher-section/Reviews/ReviewsTeacher.tsx rename to client/src/components/teacherSection/Reviews/ReviewsTeacher.tsx diff --git a/client/src/components/teacher-section/teacherAbout/teacherAbout.tsx b/client/src/components/teacherSection/teacherAbout/teacherAbout.tsx similarity index 100% rename from client/src/components/teacher-section/teacherAbout/teacherAbout.tsx rename to client/src/components/teacherSection/teacherAbout/teacherAbout.tsx diff --git a/client/src/components/teacher-section/teacherNavigation/TeacherNavigation.tsx b/client/src/components/teacherSection/teacherNavigation/TeacherNavigation.tsx similarity index 100% rename from client/src/components/teacher-section/teacherNavigation/TeacherNavigation.tsx rename to client/src/components/teacherSection/teacherNavigation/TeacherNavigation.tsx diff --git a/client/src/components/teacher-section/teacherSchedule/Calendar/Calendar.tsx b/client/src/components/teacherSection/teacherSchedule/Calendar/Calendar.tsx similarity index 100% rename from client/src/components/teacher-section/teacherSchedule/Calendar/Calendar.tsx rename to client/src/components/teacherSection/teacherSchedule/Calendar/Calendar.tsx diff --git a/client/src/components/teacher-section/teacherSchedule/TeacherSchedule.tsx b/client/src/components/teacherSection/teacherSchedule/TeacherSchedule.tsx similarity index 100% rename from client/src/components/teacher-section/teacherSchedule/TeacherSchedule.tsx rename to client/src/components/teacherSection/teacherSchedule/TeacherSchedule.tsx diff --git a/client/src/components/teacher-section/teacherSchedule/Time/Time.tsx b/client/src/components/teacherSection/teacherSchedule/Time/Time.tsx similarity index 100% rename from client/src/components/teacher-section/teacherSchedule/Time/Time.tsx rename to client/src/components/teacherSection/teacherSchedule/Time/Time.tsx diff --git a/client/src/components/teacher-section/teacherSubjects/teacherSubjects.tsx b/client/src/components/teacherSection/teacherSubjects/teacherSubjects.tsx similarity index 100% rename from client/src/components/teacher-section/teacherSubjects/teacherSubjects.tsx rename to client/src/components/teacherSection/teacherSubjects/teacherSubjects.tsx diff --git a/client/src/components/ui/mobileMenu/MobileMenu.tsx b/client/src/components/ui/mobileMenu/MobileMenu.tsx index c873ffa..9be5f8e 100644 --- a/client/src/components/ui/mobileMenu/MobileMenu.tsx +++ b/client/src/components/ui/mobileMenu/MobileMenu.tsx @@ -1,7 +1,7 @@ import React from "react"; import * as Dialog from "@radix-ui/react-dialog"; -import menuIcon from "../../../assets/icons/Menu Button.svg"; -import crossIcon from "../../../assets/icons/cross.svg"; +import MenuIcon from "../../icons/Menu-button"; +import CrossIcon from "../../icons/Cross"; interface MobileMenuProps { isOpen: boolean; @@ -58,7 +58,7 @@ export const MobileMenu: React.FC = ({ isOpen, onClose }) => { " aria-label="Close menu" > - Close + @@ -96,6 +96,6 @@ export const MenuButton: React.FC = ({ onClick, isOpen }) => ( " aria-label={isOpen ? "Close menu" : "Open menu"} > - Menu + ); diff --git a/client/src/pages/ClientsClasses/ClientsClasses.tsx b/client/src/pages/ClientsClasses/ClientsClasses.tsx index aaf5977..e7bc684 100644 --- a/client/src/pages/ClientsClasses/ClientsClasses.tsx +++ b/client/src/pages/ClientsClasses/ClientsClasses.tsx @@ -4,10 +4,10 @@ import { defaultStudentMenuItems, defaultTeacherMenuItems, } from "../../components/sidebar/Sidebar"; -import { TopBar } from "../../components/header-private/TopBar"; +import { TopBar } from "../../components/headerPrivate/TopBar"; import { Pagination } from "../../components/ui/pagination/Pagination"; import LessonsTable from "../../components/table/LessonsTable"; -import { PageTitle } from "../../components/page-title/PageTitle"; +import { PageTitle } from "../../components/pageTitle/PageTitle"; import { useAuthSessionStore } from "../../store/authSession.store"; import { useLocation } from "react-router-dom"; diff --git a/client/src/pages/ClientsDashboard/ClientsDashboard.tsx b/client/src/pages/ClientsDashboard/ClientsDashboard.tsx index 9da3200..fc3e9b9 100644 --- a/client/src/pages/ClientsDashboard/ClientsDashboard.tsx +++ b/client/src/pages/ClientsDashboard/ClientsDashboard.tsx @@ -3,7 +3,7 @@ import { Sidebar, defaultStudentMenuItems, } from "../../components/sidebar/Sidebar"; -import { TopBar } from "../../components/header-private/TopBar"; +import { TopBar } from "../../components/headerPrivate/TopBar"; export const ClientsDashboard = () => { return ( diff --git a/client/src/pages/clientsBilling/ClientsBilling.tsx b/client/src/pages/clientsBilling/ClientsBilling.tsx index c99c63f..735fc16 100644 --- a/client/src/pages/clientsBilling/ClientsBilling.tsx +++ b/client/src/pages/clientsBilling/ClientsBilling.tsx @@ -5,7 +5,7 @@ import { defaultStudentMenuItems, defaultTeacherMenuItems, } from "../../components/sidebar/Sidebar"; -import { TopBar } from "../../components/header-private/TopBar"; +import { TopBar } from "../../components/headerPrivate/TopBar"; import { Pagination } from "../../components/ui/pagination/Pagination"; import { BillingHeader } from "../../components/clientsBillings/BillingHeader"; import { useAuthSessionStore } from "../../store/authSession.store"; diff --git a/client/src/pages/home/Home.tsx b/client/src/pages/home/Home.tsx index 1e80780..72051b2 100644 --- a/client/src/pages/home/Home.tsx +++ b/client/src/pages/home/Home.tsx @@ -1,8 +1,8 @@ -import { Hero } from "../../components/home-section/Hero/Hero"; -import { Features } from "../../components/home-section/Features/Features"; -import { PopularSubjects } from "../../components/home-section/PopularSubjects/PopularSubjects"; -import { OurClients } from "../../components/home-section/OurClients/ourClients"; -import { ReviewsHome } from "../../components/home-section/Reviews/ReviewsHome"; +import { Hero } from "../../components/homeSection/Hero/Hero"; +import { Features } from "../../components/homeSection/Features/Features"; +import { PopularSubjects } from "../../components/homeSection/PopularSubjects/PopularSubjects"; +import { OurClients } from "../../components/homeSection/OurClients/ourClients"; +import { ReviewsHome } from "../../components/homeSection/Reviews/ReviewsHome"; export const Home = () => { return ( diff --git a/client/src/pages/teacherDashboard/TeacherDashboard.tsx b/client/src/pages/teacherDashboard/TeacherDashboard.tsx index 37cfb63..dda9269 100644 --- a/client/src/pages/teacherDashboard/TeacherDashboard.tsx +++ b/client/src/pages/teacherDashboard/TeacherDashboard.tsx @@ -3,7 +3,7 @@ import { Sidebar, defaultTeacherMenuItems, } from "../../components/sidebar/Sidebar"; -import { TopBar } from "../../components/header-private/TopBar"; +import { TopBar } from "../../components/headerPrivate/TopBar"; export const TeacherDashboard = () => { return ( diff --git a/client/src/pages/teacherDetail/teacherDetail.tsx b/client/src/pages/teacherDetail/teacherDetail.tsx index 19fc78e..a8eeac9 100644 --- a/client/src/pages/teacherDetail/teacherDetail.tsx +++ b/client/src/pages/teacherDetail/teacherDetail.tsx @@ -1,14 +1,14 @@ import { useNavigate } from "react-router-dom"; import { Button } from "../../components/ui/button/Button"; import { TeacherCard } from "../../components/teacherCard/teacherCard"; -import { TeacherNavigation } from "../../components/teacher-section/teacherNavigation/TeacherNavigation"; -import TeacherSubjects from "../../components/teacher-section/teacherSubjects/teacherSubjects"; -import TeacherAbout from "../../components/teacher-section/teacherAbout/teacherAbout"; -import TeacherSchedule from "../../components/teacher-section/teacherSchedule/TeacherSchedule"; +import { TeacherNavigation } from "../../components/teacherSection/teacherNavigation/TeacherNavigation"; +import TeacherSubjects from "../../components/teacherSection/teacherSubjects/teacherSubjects"; +import TeacherAbout from "../../components/teacherSection/teacherAbout/teacherAbout"; +import TeacherSchedule from "../../components/teacherSection/teacherSchedule/TeacherSchedule"; import { useState } from "react"; import Person from "../../assets/images/person.jpg"; import { TeacherType } from "../../types/teacher.types"; -import { ReviewsTeacher } from "../../components/teacher-section/Reviews/ReviewsTeacher"; +import { ReviewsTeacher } from "../../components/teacherSection/Reviews/ReviewsTeacher"; const teacher: TeacherType = { id: "1", From b91328835cefd2e7f89bd700c0341529b129734b Mon Sep 17 00:00:00 2001 From: Dasha Date: Sun, 8 Feb 2026 17:00:08 +0100 Subject: [PATCH 2/2] add page appointments for teacher and students --- .vscode/settings.json | 5 - client/src/components/sidebar/Sidebar.tsx | 11 ++ client/src/components/table/LessonRow.tsx | 20 ++- client/src/components/table/LessonsTable.tsx | 4 +- .../ui/statusButtons/StatusButtons.tsx | 61 +++++++ .../ClientsAppointments.tsx | 167 ++++++++++++++++++ .../TeacherAppointments.tsx | 138 +++++++++++++++ .../router/routesVariables/pathVariables.ts | 1 + .../router/routesVariables/privateRoutes.tsx | 4 + 9 files changed, 403 insertions(+), 8 deletions(-) delete mode 100644 .vscode/settings.json create mode 100644 client/src/components/ui/statusButtons/StatusButtons.tsx create mode 100644 client/src/pages/clientsAppointments/ClientsAppointments.tsx create mode 100644 client/src/pages/teacherAppointments/TeacherAppointments.tsx diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 47888b8..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "editor.formatOnSave": true, - "editor.tabSize": 2, - "editor.defaultFormatter": "esbenp.prettier-vscode" -} diff --git a/client/src/components/sidebar/Sidebar.tsx b/client/src/components/sidebar/Sidebar.tsx index 510fe9b..b0fb7be 100644 --- a/client/src/components/sidebar/Sidebar.tsx +++ b/client/src/components/sidebar/Sidebar.tsx @@ -2,6 +2,7 @@ import React from "react"; import { Link, useLocation } from "react-router-dom"; import BillingIcon from "../icons/Billing"; +import AppointmentsIcon from "../icons/Appointments"; import DashboardIcon from "../icons/Dashboard"; import LessonsIcon from "../icons/Lessons"; import SettingsIcon from "../icons/Settings"; @@ -16,6 +17,11 @@ export type MenuItem = { export const defaultStudentMenuItems: MenuItem[] = [ { name: "Dashboard", link: "/clients-dashboard", icon: DashboardIcon }, + { + name: "Appointments", + link: "/clients-appointments", + icon: AppointmentsIcon, + }, { name: "My Classes", link: "/student-classes", icon: LessonsIcon }, { name: "Billings", link: "/clients-billing", icon: BillingIcon }, { name: "Video call", link: "/video-call", icon: VideoCallIcon }, @@ -24,6 +30,11 @@ export const defaultStudentMenuItems: MenuItem[] = [ export const defaultTeacherMenuItems: MenuItem[] = [ { name: "Dashboard", link: "/teacher/my-dashboard", icon: DashboardIcon }, + { + name: "Appointments", + link: "/teacher-appointments", + icon: AppointmentsIcon, + }, { name: "My Classes", link: "/teacher/my-classes", icon: LessonsIcon }, { name: "My Students", link: "/teacher/my-students", icon: UsersIcon }, { name: "Billings", link: "/teacher/my-billings", icon: BillingIcon }, diff --git a/client/src/components/table/LessonRow.tsx b/client/src/components/table/LessonRow.tsx index 9292013..4200c3e 100644 --- a/client/src/components/table/LessonRow.tsx +++ b/client/src/components/table/LessonRow.tsx @@ -3,6 +3,7 @@ import { Button } from "../ui/button/Button"; import KebabVerticalIcon from "../icons/KebabVertical"; import UncheckedIcon from "../icons/Uncheked"; import Check from "../icons/Check"; +import { StatusButtons } from "../ui/statusButtons/StatusButtons"; export type LessonRowData = { id?: string | number; @@ -17,6 +18,7 @@ type LessonRowProps = { onToggle: () => void; // checkbox toggle handler columns: { key: string; label: string }[]; // columns to render in order rowHeight: number; // row height in px + useStatusButtons?: boolean; }; const LessonRow = ({ @@ -25,6 +27,7 @@ const LessonRow = ({ onToggle, columns, rowHeight, + useStatusButtons = false, }: LessonRowProps) => { const rowBgClass = index % 2 === 0 ? "bg-[#0F0E13]" : "bg-[#211C27]"; @@ -58,10 +61,23 @@ const LessonRow = ({ - {data[column.key]} + {column.key === "status" && useStatusButtons ? ( + + ) : ( + data[column.key] + )} ))} diff --git a/client/src/components/table/LessonsTable.tsx b/client/src/components/table/LessonsTable.tsx index ecfa8fa..3d0039e 100644 --- a/client/src/components/table/LessonsTable.tsx +++ b/client/src/components/table/LessonsTable.tsx @@ -17,6 +17,7 @@ type LessonsTableProps = { headerHeight?: number; // header row height in px rowHeight?: number; // body row height in px className?: string; // extra classes for the table container + useStatusButtons?: boolean; }; const DEFAULT_CHECKBOX_COL = "62px"; @@ -33,6 +34,7 @@ const LessonsTable = ({ headerHeight = 58, rowHeight = 58, className, + useStatusButtons = false, }: LessonsTableProps) => { const [rows, setRows] = useState(sourceRows); @@ -70,7 +72,6 @@ const LessonsTable = ({ - handleToggleRow(index)} columns={columns} rowHeight={rowHeight} + useStatusButtons={useStatusButtons} /> ))} diff --git a/client/src/components/ui/statusButtons/StatusButtons.tsx b/client/src/components/ui/statusButtons/StatusButtons.tsx new file mode 100644 index 0000000..3df283a --- /dev/null +++ b/client/src/components/ui/statusButtons/StatusButtons.tsx @@ -0,0 +1,61 @@ +import { useState } from "react"; + +type Status = "pending" | "approved" | "rejected"; + +interface StatusButtonsProps { + initialStatus?: Status; + onStatusChange?: (status: Status) => void; +} + +export const StatusButtons = ({ + initialStatus = "pending", + onStatusChange, +}: StatusButtonsProps) => { + const [status, setStatus] = useState(initialStatus); + + const handleStatusChange = (newStatus: Status) => { + setStatus(newStatus); + onStatusChange?.(newStatus); + }; + + const getButtonStyle = (buttonStatus: Status) => { + const baseStyle = + "px-3 py-1 rounded-md text-sm font-medium transition-colors"; + + if (status === buttonStatus) { + switch (buttonStatus) { + case "pending": + return `${baseStyle} bg-yellow-100 text-yellow-800 border border-yellow-300`; + case "approved": + return `${baseStyle} bg-green-100 text-green-800 border border-green-300`; + case "rejected": + return `${baseStyle} bg-red-100 text-red-800 border border-red-300`; + } + } + + return `${baseStyle} bg-gray-50 text-gray-600 border border-gray-300 hover:bg-gray-100`; + }; + + return ( +

+ + + +
+ ); +}; diff --git a/client/src/pages/clientsAppointments/ClientsAppointments.tsx b/client/src/pages/clientsAppointments/ClientsAppointments.tsx new file mode 100644 index 0000000..c0cf2d9 --- /dev/null +++ b/client/src/pages/clientsAppointments/ClientsAppointments.tsx @@ -0,0 +1,167 @@ +import { useState } from "react"; +import { + Sidebar, + defaultStudentMenuItems, + defaultTeacherMenuItems, +} from "../../components/sidebar/Sidebar"; +import { TopBar } from "../../components/headerPrivate/TopBar"; +import { PageTitle } from "../../components/pageTitle/PageTitle"; +import LessonsTable from "../../components/table/LessonsTable"; +import { Pagination } from "../../components/ui/pagination/Pagination"; +import { useAuthSessionStore } from "../../store/authSession.store"; +import { useLocation } from "react-router-dom"; + +export const ClientsAppointments = () => { + const [page, setPage] = useState(1); + const { pathname } = useLocation(); + const accountType = useAuthSessionStore((s) => s.accountType ?? s.user?.role); + + const inferredType = + accountType ?? (pathname.startsWith("/teacher") ? "teacher" : "student"); + + const isTeacher = inferredType === "teacher"; + const sidebarItems = isTeacher + ? defaultTeacherMenuItems + : defaultStudentMenuItems; + + const columns = isTeacher + ? [ + { key: "lesson", label: "Lessons", width: "130px" }, + { key: "student", label: "Students", width: "184px" }, + { key: "price", label: "Price", width: "146px" }, + { key: "date", label: "Date", width: "146px" }, + { key: "time", label: "Time", width: "146px" }, + { key: "status", label: "Status", width: "200px" }, + ] + : [ + { key: "lesson", label: "Lessons", width: "130px" }, + { key: "teacher", label: "Teachers", width: "184px" }, + { key: "price", label: "Price", width: "146px" }, + { key: "date", label: "Date", width: "146px" }, + { key: "time", label: "Time", width: "146px" }, + { key: "status", label: "Status", width: "200px" }, + ]; + + return ( +
+ + +
+ + +
+ + +
+ + + +
+ +
+
+
+
+ ); +}; diff --git a/client/src/pages/teacherAppointments/TeacherAppointments.tsx b/client/src/pages/teacherAppointments/TeacherAppointments.tsx new file mode 100644 index 0000000..6016fe6 --- /dev/null +++ b/client/src/pages/teacherAppointments/TeacherAppointments.tsx @@ -0,0 +1,138 @@ +import { useState } from "react"; +import { + Sidebar, + defaultTeacherMenuItems, +} from "../../components/sidebar/Sidebar"; +import { TopBar } from "../../components/headerPrivate/TopBar"; +import { PageTitle } from "../../components/pageTitle/PageTitle"; +import LessonsTable from "../../components/table/LessonsTable"; +import { Pagination } from "../../components/ui/pagination/Pagination"; + +export const TeacherAppointments = () => { + const [page, setPage] = useState(1); + + const columns = [ + { key: "lesson", label: "Lessons", width: "130px" }, + { key: "student", label: "Students", width: "184px" }, + { key: "price", label: "Price", width: "146px" }, + { key: "date", label: "Date", width: "146px" }, + { key: "time", label: "Time", width: "146px" }, + { key: "status", label: "Status", width: "200px" }, + ]; + + return ( +
+ + +
+ + +
+ + +
+ + + +
+ +
+
+
+
+ ); +}; diff --git a/client/src/router/routesVariables/pathVariables.ts b/client/src/router/routesVariables/pathVariables.ts index 48f6e02..fda1c13 100644 --- a/client/src/router/routesVariables/pathVariables.ts +++ b/client/src/router/routesVariables/pathVariables.ts @@ -14,4 +14,5 @@ export const authRoutesVariables = { export const privatesRoutesVariables = { dashboard: "/dashboard", + appointments: "/appointments", }; diff --git a/client/src/router/routesVariables/privateRoutes.tsx b/client/src/router/routesVariables/privateRoutes.tsx index a9918d0..fb74a97 100644 --- a/client/src/router/routesVariables/privateRoutes.tsx +++ b/client/src/router/routesVariables/privateRoutes.tsx @@ -4,6 +4,8 @@ import { ClientsDashboard } from "../../pages/ClientsDashboard/ClientsDashboard" import { ClientsClasses } from "../../pages/ClientsClasses/ClientsClasses"; import { ClientsBilling } from "../../pages/clientsBilling/ClientsBilling"; import { TeacherDashboard } from "../../pages/teacherDashboard/TeacherDashboard"; +import { ClientsAppointments } from "../../pages/clientsAppointments/ClientsAppointments"; +import { TeacherAppointments } from "../../pages/teacherAppointments/TeacherAppointments"; export const privateRoutes: RouteObject[] = [ { @@ -12,10 +14,12 @@ export const privateRoutes: RouteObject[] = [ }, { path: "/clients-dashboard", element: }, { path: "/student-classes", element: }, + { path: "/clients-appointments", element: }, { path: "/clients-billing", element: }, { path: "/teacher/my-dashboard", element: }, { path: "/teacher/my-classes", element: }, { path: "/teacher/my-students", element: }, { path: "/teacher/my-billings", element: }, + { path: "/teacher-appointments", element: }, ];