diff --git a/app/src/App.tsx b/app/src/App.tsx index e225897..5459574 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -4,6 +4,7 @@ import Home from "./pages/Home"; import MentorDashboard from "./pages/MentorDashboard"; import CreateWorkshop from "./pages/CreateWorkshop"; import CreateMeeting from "./pages/CreateMeeting"; +import MenteeInformation from "./pages/MenteeInformation"; import AuthCallback from "./pages/auth-callback"; function App(): ReactElement { @@ -15,6 +16,7 @@ function App(): ReactElement { } /> } /> } /> + } /> } /> diff --git a/app/src/assets/image.jpg b/app/src/assets/image.jpg new file mode 100644 index 0000000..2ef9691 Binary files /dev/null and b/app/src/assets/image.jpg differ diff --git a/app/src/pages/MenteeInformation.tsx b/app/src/pages/MenteeInformation.tsx new file mode 100644 index 0000000..775d41c --- /dev/null +++ b/app/src/pages/MenteeInformation.tsx @@ -0,0 +1,113 @@ +import React, { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import Navbar from "../components/Navbar"; +import Image from "../assets/image.jpg"; + +const MenteeInformation = () => { + const navigate = useNavigate(); + const [activeTab, setActiveTab] = useState("Workshops"); + + const menteeData = { + name: "Chloe Kim", + role: "Marketing", + description: + "Lorem ipsum dolor sit amet consectetur. In lectus et et pellentesque a mattis. Sapien morbi congue nulla diam sit non at. Arcu platea semper fermentum at fusce. Eu sem varius molestie elit venenatis. Nulla est sollicitudin.", + workshops: ["Resume Prep", "Career Advancement", "Resume Workshop"], + }; + + return ( + <> + +
+
+
+
+ Profile +
+
+ {menteeData.name} +
+
+ {menteeData.role} +
+
+
+ +
+
+ Information +
+
+
+
+ {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} +
+ ))} +
+ + {activeTab === "Workshops" && ( +
+
+ Current Workshops +
+
+ {menteeData.workshops.map((workshop, index) => ( +
+
+ {workshop} +
+ ))} +
+ +
+ )} +
+
+
+
+
+ + ); +}; + +export default MenteeInformation; diff --git a/app/src/pages/MentorDashboard.tsx b/app/src/pages/MentorDashboard.tsx index 4c7c25e..ccb9308 100644 --- a/app/src/pages/MentorDashboard.tsx +++ b/app/src/pages/MentorDashboard.tsx @@ -1,48 +1,69 @@ import React, { useState } from "react"; import Navbar from "../components/Navbar"; +import { useNavigate } from "react-router-dom"; +interface MenteeInformationElements { + id: number; + menteeName: string; +} + +const handleClick = (item: MenteeInformationElements) => { + console.log("Clicked:", item); +}; const MentorDashboard = () => { + const navigate = useNavigate(); + + const gridData: MenteeInformationElements[] = [ + { + id: 1, + menteeName: "Jane Doe", + }, + ]; + + const handleClick = (id: number) => { + navigate(`/mentor/mentee-information/`); + }; return ( <>
- -
-
My Mentees
-
Courses
-
- -
-
-
-
-

JaneDoe

-
+
+
+ My Mentees
- -
-
-
-

Jane Doe

-
+
+ Courses
+
-
-
-
-

Jane Doe

+
+ {gridData.map((item) => ( +
handleClick(item.id)} + > +
+
+

+ {item.menteeName} +

+
-
+ ))}
-
-
Upcoming Events!
-
- +
+ Upcoming Events! +
+
); diff --git a/app/src/styles/_utilities.scss b/app/src/styles/_utilities.scss index e7f3a17..ca0fca0 100644 --- a/app/src/styles/_utilities.scss +++ b/app/src/styles/_utilities.scss @@ -590,6 +590,9 @@ .Width--40 { width: 40%; } .Width--60 { width: 60%; } + +.Width--80 { width: 80%; } + .Width--50 { width: 50%; }