diff --git a/app/src/components/Navbar.tsx b/app/src/components/Navbar.tsx index c8e5af0..8f19fba 100644 --- a/app/src/components/Navbar.tsx +++ b/app/src/components/Navbar.tsx @@ -4,6 +4,8 @@ import { LoginButton } from "./mock-login-button"; import { SignupButton } from "./mock-sign-up"; import { LogoutButton } from "./mock-logout-button"; import { useAuth0 } from "@auth0/auth0-react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + const Navbar = (): ReactElement => { const navigate = useNavigate(); @@ -12,20 +14,17 @@ const Navbar = (): ReactElement => { return ( <>
+
+
-
{ - navigate("/home"); - }} - className="Navbar-body-logo" - >
{ navigate("/home"); - }} - className="Navbar-body-home" - >
+ }}> + +
{ @@ -67,6 +66,8 @@ const Navbar = (): ReactElement => { )} {isAuthenticated && } +
+
diff --git a/app/src/pages/CreateMeeting.tsx b/app/src/pages/CreateMeeting.tsx index 4ef8724..7b04c9e 100644 --- a/app/src/pages/CreateMeeting.tsx +++ b/app/src/pages/CreateMeeting.tsx @@ -18,7 +18,7 @@ const validationSchema = Yup.object().shape({ const CreateMeeting = () => { const handleSubmit = async ( values: any, - { setSubmitting, resetForm }: any, + { setSubmitting, resetForm }: any ) => { setSubmitting(true); try { @@ -46,50 +46,72 @@ const CreateMeeting = () => { return ( <> -

Create Meeting

- - {({ errors, touched, isSubmitting }) => ( -
-
- - - {errors.meeting && touched.meeting && ( -
{errors.meeting}
- )} -
+
+
+ Create Meeting +
+
+ + {({ errors, touched, isSubmitting }) => ( + +
+
+
+
Meeting Name:
+
+ + {errors.meeting && touched.meeting && ( +
{errors.meeting}
+ )} +
+
-
- - - {errors.notes && touched.notes && ( -
{errors.notes}
- )} -
+
+
+
+
Notes:
+
+ + {errors.notes && touched.notes && ( +
{errors.notes}
+ )} +
+
- - - )} - +
+ +
+ + )} + +
+
); }; diff --git a/app/src/pages/CreateWorkshop.tsx b/app/src/pages/CreateWorkshop.tsx index 00e0cc7..317d591 100644 --- a/app/src/pages/CreateWorkshop.tsx +++ b/app/src/pages/CreateWorkshop.tsx @@ -19,7 +19,7 @@ const CreateWorkshop = () => { // Handle form submission const handleSubmit = async ( values: any, - { setSubmitting, resetForm }: any, + { setSubmitting, resetForm }: any ) => { setSubmitting(true); try { @@ -42,52 +42,75 @@ const CreateWorkshop = () => { return ( <> -

Create Workshop

- - {({ errors, touched, isSubmitting }) => ( -
-
- - - {/* Display error message if name field is invalid */} - {errors.name && touched.name && ( -
{errors.name}
- )} -
-
- - - {/* Display error message if description field is invalid */} - {errors.description && touched.description && ( -
{errors.description}
- )} -
+
+
+ Create Workshop +
+
+ + {({ errors, touched, isSubmitting }) => ( + +
+
+
+
Workshop Name:
+
+ + {/* Display error message if name field is invalid */} + {errors.name && touched.name && ( +
{errors.name}
+ )} +
+
- - - )} - +
+
+
+
Workshop Description:
+
+ + {/* Display error message if description field is invalid */} + {errors.description && touched.description && ( +
{errors.description}
+ )} +
+
+ +
+ +
+ + )} + +
+
); }; diff --git a/app/src/pages/MenteeInformation.tsx b/app/src/pages/MenteeInformation.tsx index 775d41c..f441d5b 100644 --- a/app/src/pages/MenteeInformation.tsx +++ b/app/src/pages/MenteeInformation.tsx @@ -20,91 +20,217 @@ const MenteeInformation = () => {
-
-
- Profile -
-
- {menteeData.name} -
-
- {menteeData.role} +
+
+ Profile +
+
+ {menteeData.name} +
+
+ {menteeData.role} +
-
-
-
- Information +
+
+ Information +
-
-
-
- {menteeData.description} +
+
+ {menteeData.description} +
-
-
-
- {["Workshops", "Meetings", "Schedule New"].map((tab) => ( -
setActiveTab(tab)} - className={ - "Cursor--pointer Padding-bottom--8 Margin-right--32 Text-fontSize--15 " + - (activeTab === tab - ? "Border-bottom--blue Text-color--gray-1000" - : "Text-color--gray-600") - } - style={{ - cursor: 'pointer', - paddingBottom: '8px', - borderBottom: activeTab === tab ? '2px solid #0096C0' : '2px solid transparent', - marginRight: '48px' - }} - > - {tab} -
- ))} -
+
+
+ {["Workshops", "Meetings", "Schedule New"].map((tab) => ( +
setActiveTab(tab)} + className={ + "Cursor--pointer Padding-bottom--8 Margin-right--32 Text-fontSize--15 " + + (activeTab === tab + ? "Border-bottom--blue Text-color--gray-1000" + : "Text-color--gray-600") + } + style={{ + cursor: "pointer", + paddingBottom: "8px", + borderBottom: + activeTab === tab + ? "2px solid #0096C0" + : "2px solid transparent", + marginRight: "48px", + }} + > + {tab} +
+ ))} +
- {activeTab === "Workshops" && ( -
-
- Current Workshops + {activeTab === "Workshops" && ( +
+
+ Current Workshops +
+
+ {menteeData.workshops.map((workshop, index) => ( +
+
+ {workshop} +
+ ))} +
+
+ Assign New Courses +
-
- {menteeData.workshops.map((workshop, index) => ( -
+ )} + + {activeTab === "Meetings" && ( +
+
+ Upcoming +
+
+
- {workshop} + className="Margin-right--40" + style={{ textAlign: "center", width: "40px" }} + > +
wed
+
+ 25 +
+
+
+
+ Mock Interview Session +
+
+ Practice your interview skills with an industry + professional +
+
+
+
+
{ + navigate("/create-meeting"); + }}> + Add New Meeting Notes +
+
- ))} +
+ +
+ Past +
+
+
+
+
wed
+
+ 25 +
+
+
+
+ Mock Interview Session +
+
+ Practice your interview skills with an industry + professional +
+
+
+
+
+ Add New Meeting Notes +
+
+
- + )} + + {activeTab === "Schedule New" && ( +
+
+ Schedule A New Meeting +
+
+
+ Date: +
+
+
+
+ Time: +
+
+
+
+ Description: +
+
+
+
+ Schedule Meeting +
+
)} +
-
); diff --git a/app/src/pages/MentorDashboard.tsx b/app/src/pages/MentorDashboard.tsx index ccb9308..09bcb6b 100644 --- a/app/src/pages/MentorDashboard.tsx +++ b/app/src/pages/MentorDashboard.tsx @@ -7,6 +7,11 @@ interface MenteeInformationElements { menteeName: string; } +interface CourseInformationElements { + id: number; + courseName: string; +} + const handleClick = (item: MenteeInformationElements) => { console.log("Clicked:", item); }; @@ -14,13 +19,22 @@ const handleClick = (item: MenteeInformationElements) => { const MentorDashboard = () => { const navigate = useNavigate(); - const gridData: MenteeInformationElements[] = [ + const [activeTab, setActiveTab] = useState("My Mentees"); + + const menteeGridData: MenteeInformationElements[] = [ { id: 1, menteeName: "Jane Doe", }, ]; + const courseGridData: CourseInformationElements[] = [ + { + id: 1, + courseName: "Resume", + }, + ]; + const handleClick = (id: number) => { navigate(`/mentor/mentee-information/`); }; @@ -31,39 +45,116 @@ const MentorDashboard = () => {
-
- My Mentees -
-
- Courses -
-
- -
- {gridData.map((item) => ( + {["My Mentees", "Courses"].map((tab) => (
handleClick(item.id)} + key={tab} + onClick={() => setActiveTab(tab)} + className={ + "Cursor--pointer Padding-bottom--8 Margin-right--32 Text-fontSize--20 " + + (activeTab === tab + ? "Border-bottom--blue Text-color--gray-1000" + : "Text-color--gray-600") + } + style={{ + cursor: "pointer", + paddingBottom: "8px", + borderBottom: + activeTab === tab + ? "2px solid #0096C0" + : "2px solid transparent", + marginRight: "48px", + }} > -
-
-

- {item.menteeName} -

-
+ {tab}
))}
+ + {activeTab === "My Mentees" && ( +
+
+ {menteeGridData.map((item) => ( +
handleClick(item.id)} + > +
+
+

+ {item.menteeName} +

+
+
+ ))} +
+
+ )} + + {activeTab === "Courses" && ( +
+ {courseGridData.map((item) => ( +
handleClick(item.id)} + > +
+
+

+ {item.courseName} +

+
+
+ ))} +
+ )}
-
-
- Upcoming Events! + {activeTab === "My Mentees" && ( +
+
+ Upcoming Events! +
-
+ )} + + {activeTab === "Courses" && ( +
+
+ Create A New Course +
+
+
+ Name: +
+
+
+
+ Description: +
+
+
+
{ + navigate("/create-workshop"); + }}> + Add New Files: +
+
+
+ )}
);