Skip to content

Commit

Permalink
Add mentee information page + updates to Mentor Dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@graysonsmithh
graysonsmithh committed Dec 8, 2024
1 parent bbc5d0a commit e1e79b6
Show file tree
Hide file tree
Showing 5 changed files with 166 additions and 27 deletions.
2 changes: 2 additions & 0 deletions app/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -15,6 +16,7 @@ function App(): ReactElement {
<Route path="/mentor" element={<MentorDashboard />} />
<Route path="/create-workshop" element={<CreateWorkshop />} />
<Route path="/create-meeting" element={<CreateMeeting />} />
<Route path="/mentor/mentee-information" element={<MenteeInformation />} />
<Route path="/callback" element={<AuthCallback />} />
</Routes>
</div>
Expand Down
Binary file added app/src/assets/image.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
113 changes: 113 additions & 0 deletions app/src/pages/MenteeInformation.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<>
<Navbar />
<div className="Flex-row Justify-content--spaceBetween">
<div className="Block Width--80 Margin-right--40 Margin-left--40 Margin-top--40 Height--100vh">
<div className = "Width--60">
<div className="Flex-row Margin-bottom--80 Margin-left--60 Margin-right--100 Margin-top--30">
<img
src={Image}
alt="Profile"
className="Border--rounded"
style={{ width: "120px", height: "120px" }}
/>
<div>
<div className="Text-fontSize--20 Text-color--gray-1000 Padding-left--70">
{menteeData.name}
</div>
<div className="Text-fontSize--15 Text-color--gray-600 Margin-top--7">
{menteeData.role}
</div>
</div>
</div>

<div className="Flex-row Margin-bottom--20 Margin-right--100 Margin-left--60">
<div className="Text-fontSize--18 Text-color--gray-1000">
Information
</div>
</div>
<div className="Flex-row Margin-bottom--40 Margin-right--100 Margin-left--60">
<div className="Text-color--gray-600 Text-fontSize--16">
{menteeData.description}
</div>
</div>

<div>
<div>
<div className="Flex-row Justify-content--spaceBetween Margin-bottom--24 Margin-left--60">
{["Workshops", "Meetings", "Schedule New"].map((tab) => (
<div
key={tab}
onClick={() => 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}
</div>
))}
</div>

{activeTab === "Workshops" && (
<div>
<div className="Text-fontSize--20 Text-color--teal-800 Margin-left--60 Margin-bottom--20"
style = {{borderBottom: '2px solid rgba(84, 84, 84, 0.3)',
paddingBottom: '10px'
}}>
Current Workshops
</div>
<div className="List-style--none Margin-left--80">
{menteeData.workshops.map((workshop, index) => (
<div
key={index}
className="Text-fontSize--16 Text-color--gray-600 Margin-bottom--24 Flex-row Align-items--center"
>
<div
className="Background-color--teal-1000 Border--rounded Margin-right--16"
style={{ width: "8px", height: "8px", flexShrink: 0 }}
/>
{workshop}
</div>
))}
</div>
<button className="Button-color--teal-1000 Border-radius--5 Text-color--white Margin-top--32 Margin-left--80">
Assign New Courses
</button>
</div>
)}
</div>
</div>
</div>
</div>
</div>
</>
);
};

export default MenteeInformation;
75 changes: 48 additions & 27 deletions app/src/pages/MentorDashboard.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<>
<Navbar />
<div className="Flex-row Justify-content--spaceBetween">
<div className="Block Width--60 Margin-right--40 Margin-left--40 Margin-top--40 Height--100vh">

<div className="Flex-row Margin-bottom--30">
<div className="Button--large Border-color--light-1000 Text-color--gray-600 Margin-right--40">My Mentees</div>
<div className="Button--large Border-color--light-1000 Text-color--gray-600">Courses</div>
</div>

<div className="Flex-grid Justify-content--spaceBetween Margin-bottom--40">
<div className="Card Card--noPadding Card-hover Margin-right--10" style={{ width: "215px"}}>
<div className="Background-color--teal-1000 Padding--20 Border-radius-topLeft--8 Border-radius-topRight--8 Align-items--center Justify-content--center" style={{ height: "96px" }}></div>
<div className="Padding--10" style={{ height: "75px" }}>
<h3 className="Text-fontSize--20 Text-color--gray-600">JaneDoe</h3>
</div>
<div className="Flex-row Margin-bottom--30">
<div className="Button--large Border-color--light-1000 Text-color--gray-600 Margin-right--40">
My Mentees
</div>

<div className="Card Card--noPadding Card-hover Margin-right--10" style={{ width: "215px"}}>
<div className="Background-color--green-1000 Padding--20 Border-radius-topLeft--8 Border-radius-topRight--8 Align-items--center Justify-content--center" style={{ height: "96px" }}></div>
<div className="Padding--10" style={{ height: "75px" }}>
<h3 className="Text-fontSize--20 Text-color--gray-600">Jane Doe</h3>
</div>
<div className="Button--large Border-color--light-1000 Text-color--gray-600">
Courses
</div>
</div>

<div className="Card Card--noPadding Card-hover Margin-right--10" style={{ width: "215px"}}>
<div className="Background-color--blue-1000 Padding--20 Border-radius-topLeft--8 Border-radius-topRight--8 Align-items--center Justify-content--center" style={{ height: "96px" }}></div>
<div className="Padding--10" style={{ height: "75px" }}>
<h3 className="Text-fontSize--20 Text-color--gray-600">Jane Doe</h3>
<div className="Flex-grid Justify-content--spaceBetween Margin-bottom--40">
{gridData.map((item) => (
<div
className="Card Card--noPadding Card-hover Margin-right--10"
style={{ width: "215px" }}
onClick={() => handleClick(item.id)}
>
<div
className="Background-color--teal-1000 Padding--20 Border-radius-topLeft--8 Border-radius-topRight--8 Align-items--center Justify-content--center"
style={{ height: "96px" }}
/>
<div className="Padding--10" style={{ height: "75px" }}>
<h3 className="Text-fontSize--20 Text-color--gray-600">
{item.menteeName}
</h3>
</div>
</div>
</div>
))}
</div>

</div>
<div className="Block Width--40 Margin-right--40 Margin-top--40 Height--100vh">
<div className="Block-header Text--center Text-color--gray-1000 Margin-bottom--20">Upcoming Events!</div>
</div>

<div className="Block-header Text--center Text-color--gray-1000 Margin-bottom--20">
Upcoming Events!
</div>
</div>
</div>
</>
);
Expand Down
3 changes: 3 additions & 0 deletions app/src/styles/_utilities.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -590,6 +590,9 @@
.Width--40 { width: 40%; }
.Width--60 { width: 60%; }


.Width--80 { width: 80%; }

.Width--50 {
width: 50%;
}
Expand Down

0 comments on commit e1e79b6

Please sign in to comment.