From 81c9d2a75c18c6bd3a408046887ac5a3f5b4781f Mon Sep 17 00:00:00 2001 From: dev2 Date: Mon, 5 Aug 2024 14:35:05 +0000 Subject: [PATCH] s2 --- app/components/Calendar.tsx | 195 +++++ app/components/DirectoryDashboard.tsx | 149 ++++ app/components/KnowledgeQuest.tsx | 2 +- app/components/NavBar.tsx | 88 ++ app/components/Schedule.tsx | 82 ++ app/components/Sidebar.tsx | 213 +++++ app/components/StudentDashboard.tsx | 1 + app/components/TestComponent.tsx | 5 +- app/components/TestComponent2.tsx | 4 +- app/components/customIcon/CalendarIcon.tsx | 0 app/routes/dashboard.tsx | 40 + app/routes/directory.tsx | 40 + .../student-dashboard.knowledge-quest.tsx | 759 ++++++++++++++++++ public/assets/calendar-icon.svg | 1 + public/assets/left_side_nav.css | 107 +++ 15 files changed, 1683 insertions(+), 3 deletions(-) create mode 100644 app/components/Calendar.tsx create mode 100644 app/components/DirectoryDashboard.tsx create mode 100644 app/components/NavBar.tsx create mode 100644 app/components/Schedule.tsx create mode 100644 app/components/Sidebar.tsx create mode 100644 app/components/customIcon/CalendarIcon.tsx create mode 100644 app/routes/dashboard.tsx create mode 100644 app/routes/directory.tsx create mode 100644 app/routes/student-dashboard.knowledge-quest.tsx create mode 100644 public/assets/calendar-icon.svg create mode 100644 public/assets/left_side_nav.css diff --git a/app/components/Calendar.tsx b/app/components/Calendar.tsx new file mode 100644 index 0000000..889d010 --- /dev/null +++ b/app/components/Calendar.tsx @@ -0,0 +1,195 @@ +import React from "react"; +import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined } from '@ant-design/icons'; +import { Layout, Menu, theme, Button, Modal, MenuProps } from 'antd'; +import { Dropdown, Space } from 'antd'; +import dayjs from 'dayjs'; +import 'dayjs/locale/zh-cn'; +import { Calendar, Col, Row, Typography } from 'antd'; +import type { CalendarProps } from 'antd'; +import type { Dayjs } from 'dayjs'; +import dayLocaleData from 'dayjs/plugin/localeData'; +import { Content } from "antd/es/layout/layout"; +import '../../public/assets/left_side_nav.css'; + +dayjs.extend(dayLocaleData); + +const App: React.FC = () => { + + + const { token } = theme.useToken(); + + const onPanelChange = (value: Dayjs, mode: CalendarProps['mode']) => { + console.log(value.format('YYYY-MM-DD'), mode); + }; + + const wrapperStyle: React.CSSProperties = { + width: 320, + border: `1px solid ${token.colorBorderSecondary}`, + borderRadius: token.borderRadiusLG, + padding: 16, + }; + + const headerStyle: React.CSSProperties = { + display: 'flex', + justifyContent: 'space-around', + alignItems: 'center', + // marginBottom: 16, + backgroundColor: '#0752bc', + height: 47, + borderTopLeftRadius: 10, + borderTopRightRadius: 10, + + }; + + + const titleStyle: React.CSSProperties = { + fontSize: 14, + fontWeight: 'bold', + color: '#fff', + }; + + const navButtonStyle: React.CSSProperties = { + cursor: 'pointer', + fontSize: 16, + }; + + + return ( + <> + +
+
+
+
+ { + const monthFormat = 'MMMM'; + const year = value.year(); + const month = value.format(monthFormat); + + const prevMonth = () => { + const newValue = value.clone().subtract(1, 'month'); + onChange(newValue); + }; + + const nextMonth = () => { + const newValue = value.clone().add(1, 'month'); + onChange(newValue); + }; + + return ( +
+
+
{`${month} ${year}`}
+
+
+
{'<'}
+
{'>'}
+
+
+ + + ); + + }} + + onPanelChange={onPanelChange} + /> +
+
+
+
+ {/*

Upcoming Classes

*/} +

Upcoming Classes >

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+

Today's Schedule

+
+ +
+ 9 AM +
+ Lorem Ipsum
+ 9 - 10 AM +
+
+
+ 10 AM +
+ Lorem Ipsum
+ 10 - 11 AM +
+
+
+ 11 AM +
+
+
+ 12 PM +
+ Lorem Ipsum dolor sit
+ 11:30 AM - 12:30 PM +
+
+
+ 1 PM +
+ Lorem Ipsum
+ 11:30 AM - 12:30 PM +
+
+ +
+ 2 PM +
+ Lorem Ipsum dolor sit
+ 11:30 AM - 12:30 PM +
+
+
+ 3 PM +
+ Lorem Ipsum dolor sit
+ 11 AM - 12:30 PM +
+
+
+ 4 PM +
+ Lorem Ipsum
+ 11:30 AM - 12:30 PM +
+
+
+ 5 PM +
+
+
+
+
+
+
+ + + + ) +} +export default App; diff --git a/app/components/DirectoryDashboard.tsx b/app/components/DirectoryDashboard.tsx new file mode 100644 index 0000000..0b4ecd5 --- /dev/null +++ b/app/components/DirectoryDashboard.tsx @@ -0,0 +1,149 @@ +import React from "react"; +import { Layout, Menu, theme, Button, Modal, MenuProps } from 'antd'; + +const App: React.FC = () => { + return ( + <> +
+ +
+
+ +
+

Life History of Dr. Maria Montessori

+

Chapter 1 • Graduate Program

+ +
+
+
+ +
+

Introduction to Montessori Methods

+

Chapter 2 • Graduate Program

+ +
+
+
+ +
+

Exercises on Practical Life

+

Chapter 3 • Graduate Program

+ +
+
+ + + {/*
+
+
+

Attendance

+ +
+
+

Graph

+
+
*/} + + + {/*
+ +
+

Upcoming Classes

+ +
+
+
+
+
+
+
+
+ +
+

Accomplishments/Qualifications

+
+
+
+
+
+
+
+
+ + + +
*/} + +
+
+
+

Attendance

+ +
+
+

Graph

+
+
+
+ +
+

Upcoming Classes

+ +
+
+
+
+
+
+
+
+ {/*
+ +
+

Upcoming Classes

+ +
+
+
+
+
+
+
+
*/} +
+

Upcoming Tests

+
+
+
+
+
+
+
+
+ + +
+

Accomplishments/Qualifications

+
+
+
+
+
+
+
+
+
+ + ) +} +export default App; \ No newline at end of file diff --git a/app/components/KnowledgeQuest.tsx b/app/components/KnowledgeQuest.tsx index d642463..5a1af60 100644 --- a/app/components/KnowledgeQuest.tsx +++ b/app/components/KnowledgeQuest.tsx @@ -435,7 +435,7 @@ const items2: MenuProps['items'] = [ children: [ { key: '1sd', - label: (Class Schedules), + label: (Class Schedule), }, { key: '2sd', diff --git a/app/components/NavBar.tsx b/app/components/NavBar.tsx new file mode 100644 index 0000000..b581d3c --- /dev/null +++ b/app/components/NavBar.tsx @@ -0,0 +1,88 @@ +import React, { useState } from "react"; +import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined } from '@ant-design/icons'; +import { Layout, Menu, theme, Button, Modal, MenuProps } from 'antd'; +import { Dropdown, Space } from 'antd'; +import '../../public/assets/left_side_nav.css'; +import '../../public/assets/knowledge-quest.css'; +const { Content, Sider } = Layout; + +const items: MenuProps['items'] = [ + { + label: 1st menu item, + key: '01sd', + }, + { + type: 'divider', + }, + { + label: 2nd menu item, + key: '02sd', + }, + { + type: 'divider', + }, + { + label: '3rd menu item', + key: '03sd', + }, +]; + +const App: React.FC = () => { + const [collapsed, setCollapsed] = useState(false); + const [open, setOpen] = React.useState(false); + const [loading, setLoading] = React.useState(true); + + const showLoading = () => { + setOpen(true); + setLoading(true); + + // Simple loading mock. You should add cleanup logic in real world. + setTimeout(() => { + setLoading(false); + }, 100); + }; + const { token: { colorBgContainer }, } = theme.useToken(); + return ( +
+ Loading Modal

} footer={} loading={loading} open={open} onCancel={() => setOpen(false)} > +

Some contents...

+

Some contents...

+

Some contents...

+ +
+
+
+ +

Student Dashboard

+
+ +
+
+
+ ) +} + +export default App; \ No newline at end of file diff --git a/app/components/Schedule.tsx b/app/components/Schedule.tsx new file mode 100644 index 0000000..340d245 --- /dev/null +++ b/app/components/Schedule.tsx @@ -0,0 +1,82 @@ +import React from "react"; +import { Layout, Menu, theme, Button, Modal, MenuProps } from 'antd'; + +const App: React.FC = () => { + return ( + <> + +
+
+ +
+

Today's Schedule

+
+ +
+ + 9 AM +
+ Lorem Ipsum
+ 9 - 10 AM +
+
+
+ 10 AM +
+ Lorem Ipsum
+ 10 - 11 AM +
+
+
+ 11 AM +
+
+
+ 12 PM +
+ Lorem Ipsum dolor sit
+ 11:30 AM - 12:30 PM +
+
+
+ 1 PM +
+ Lorem Ipsum
+ 11:30 AM - 12:30 PM +
+
+ +
+ 2 PM +
+ Lorem Ipsum dolor sit
+ 11:30 AM - 12:30 PM +
+
+
+ 3 PM +
+ Lorem Ipsum dolor sit
+ 11 AM - 12:30 PM +
+
+
+ 4 PM +
+ Lorem Ipsum
+ 11:30 AM - 12:30 PM +
+
+
+ 5 PM +
+
+
+
+
+
+ + + ) +} +export default App; diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx new file mode 100644 index 0000000..f7be575 --- /dev/null +++ b/app/components/Sidebar.tsx @@ -0,0 +1,213 @@ +import React,{useState} from "react"; +import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined } from '@ant-design/icons'; +import AdministrationIcon from '~/components/customIcon/AdministrationIcon'; +import MyCoursesIcon from '~/components/customIcon/MyCoursesIcon'; +import ExaminationIcon from '~/components/customIcon/ExaminationIcon'; +import CommunityIcon from '~/components/customIcon/CommunityIcon'; +import NotificationIcon from '~/components/customIcon/NotificationIcon'; +import { Layout, Menu, theme, Button, Modal, MenuProps } from 'antd'; +import { Dropdown, Space } from 'antd'; +import '../../public/assets/left_side_nav.css'; +const { Content, Sider } = Layout; + + +const items2: MenuProps['items'] = [ + { + key: 'subsd1', + icon: , + label: (

  Administration

), + children: [ + { + key: '1sd', + label: (Class Schedules), + }, + { + key: '2sd', + label: (Classmate Directory), + }, + { + key: '3sd', + label: (Qualifications), + }, + ], + }, + { + key: 'subsd2', + icon: , + label: (

  My Courses

), + children: [ + { + key: '4sd', + label: (Graduate Program), + }, + { + key: '5sd', + label: (Post-Graduate Program), + }, + ], + }, + { + key: 'subsd3', + icon: , + label: (

  Examinations

), + children: [ + { + key: '6sd', + label: (Exam Scheduled), + }, + { + key: '7sd', + label: (Upcoming Exam), + }, + { + key: '8sd', + label: (Passed Exam), + }, + ], + }, + { + key: 'subsd4', + icon: , + label: (

  Community

), + children: [ + { + key: '9sd', + label: (Exam Scheduled), + }, + { + key: '10sd', + label: (Upcoming Exam), + }, + { + key: '11sd', + label: (Passed Exam), + }, + ], + }, + { + key: 'subsd5', + icon: , + label: (

  Notifications

), + children: [ + { + key: '12sd', + label: (Exam Scheduled), + }, + { + key: '13sd', + label: (Upcoming Exam), + }, + { + key: '14sd', + label: (Passed Exam), + }, + ], + }, + // getItem('Files', '9', ), + { + key: 'grp', + label: '', + type: 'group', + style: { marginTop: '100px' }, + children: [ + { + key: '15sd', style: { paddingTop: '10px', paddingBottom: '10px', border: 'none' }, + icon: React.createElement(SettingOutlined, { style: { color: '#000' } }), + label: (

Settings

) + }, + { + key: '16sd', style: { paddingTop: '10px', paddingBottom: '10px', border: 'none' }, + icon: React.createElement(QuestionCircleOutlined, { style: { color: '#000' } }), + label: (

Help & Support

) + }, + { + key: '17sd', style: { paddingTop: '10px', paddingBottom: '10px', border: 'none' }, + icon: React.createElement(LogoutOutlined, { style: { color: '#000' } }), + label: (

Logout

) + }, + ], + }, +]; + +const items: MenuProps['items'] = [ + { + label: 1st menu item, + key: '01sd', + }, + { + type: 'divider', + }, + { + label: 2nd menu item, + key: '02sd', + }, + { + type: 'divider', + }, + { + label: '3rd menu item', + key: '03sd', + }, +]; +/// +interface SidebarProps { + isCollapsed: boolean; + toggleSidebar: () => void; + } + + + +const App: React.FC = ({isCollapsed, toggleSidebar}) => { + + const [collapsed, setCollapsed] = useState(false); + + + + return( +
+ {/* setCollapsed(value)} width={366} style={{ overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0, background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000' }}> */} + +
+
+

IIMTT Logo

+
+
+ + e.preventDefault()}> + +
+ +
+

My Profile

+

Rayan Holiday

+
+ +
+ + + + + +
+ + ) + +} + +export default App; \ No newline at end of file diff --git a/app/components/StudentDashboard.tsx b/app/components/StudentDashboard.tsx index 79d4eeb..c9dd89a 100644 --- a/app/components/StudentDashboard.tsx +++ b/app/components/StudentDashboard.tsx @@ -348,6 +348,7 @@ const App: React.FC = () => {

My Profile

+

Rayan Holiday

diff --git a/app/components/TestComponent.tsx b/app/components/TestComponent.tsx index e8703c7..143948d 100644 --- a/app/components/TestComponent.tsx +++ b/app/components/TestComponent.tsx @@ -53,7 +53,7 @@ const items2: MenuProps['items'] = [ children: [ { key: '1', - label: (Class Schedules), + label: (Class Schedule), }, { key: '2', @@ -256,6 +256,7 @@ const App: React.FC = () => {

My Profile

+

Rayan Holiday

@@ -322,6 +323,8 @@ const App: React.FC = () => {

Upcoming Tests

+ +
diff --git a/app/components/TestComponent2.tsx b/app/components/TestComponent2.tsx index 0e8b9a2..7c3cb33 100644 --- a/app/components/TestComponent2.tsx +++ b/app/components/TestComponent2.tsx @@ -219,12 +219,13 @@ const App: React.FC = () => { setCollapsed(value)} width={310} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0, background: 'linear-gradient(180deg, #2F1B08D6 0%, #000000D6 83.93%)', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
-

IIMTT Logo

+

IIMTT Logo0

My Profile

Rayan Holiday

+
@@ -323,6 +324,7 @@ const App: React.FC = () => {

Upcoming Tests

+
diff --git a/app/components/customIcon/CalendarIcon.tsx b/app/components/customIcon/CalendarIcon.tsx new file mode 100644 index 0000000..e69de29 diff --git a/app/routes/dashboard.tsx b/app/routes/dashboard.tsx new file mode 100644 index 0000000..703679d --- /dev/null +++ b/app/routes/dashboard.tsx @@ -0,0 +1,40 @@ + +import React, { useState } from 'react'; +import Calendar from '../components/Calendar'; +import Sidebar from '../components/Sidebar'; +import NavBar from '../components/NavBar'; +import { Layout, Menu, theme, Button, Modal, MenuProps } from 'antd'; +import { Dropdown, Space } from 'antd'; +import '../../public/assets/left_side_nav.css'; +const { Content, Sider } = Layout; +const App: React.FC = () => { + const [isCollapsed, setIsCollapsed] = useState(false); + + const toggleSidebar = () => { + setIsCollapsed(!isCollapsed); + }; + + + return ( + + + {/* + */} + + + + + + +
+ +
+ + + + + + + ); +}; +export default App; \ No newline at end of file diff --git a/app/routes/directory.tsx b/app/routes/directory.tsx new file mode 100644 index 0000000..2f0d3dd --- /dev/null +++ b/app/routes/directory.tsx @@ -0,0 +1,40 @@ +import React, { useState } from 'react'; +import { Layout, Menu, theme, Button, Modal, MenuProps } from 'antd'; +import { Dropdown, Space } from 'antd'; +import DirectoryDashboard from '../components/DirectoryDashboard'; +import '../../public/assets/left_side_nav.css'; +const { Content, Sider } = Layout; +import Sidebar from '../components/Sidebar'; +import NavBar from '../components/NavBar'; + + +const App: React.FC = () => { + const [isCollapsed, setIsCollapsed] = useState(false); + + const toggleSidebar = () => { + setIsCollapsed(!isCollapsed); + }; + + return ( + + + + + + + + + +
+ +
+ + + + + + + + ); +}; +export default App; \ No newline at end of file diff --git a/app/routes/student-dashboard.knowledge-quest.tsx b/app/routes/student-dashboard.knowledge-quest.tsx new file mode 100644 index 0000000..cc1b767 --- /dev/null +++ b/app/routes/student-dashboard.knowledge-quest.tsx @@ -0,0 +1,759 @@ +import React, {useState} from 'react'; +import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, DownOutlined} from '@ant-design/icons'; +import Icon from '@ant-design/icons'; + +import AdministrationIcon from '~/components/customIcon/AdministrationIcon'; +import MyCoursesIcon from '~/components/customIcon/MyCoursesIcon'; +import ExaminationIcon from '~/components/customIcon/ExaminationIcon'; +import CommunityIcon from '~/components/customIcon/CommunityIcon'; +import NotificationIcon from '~/components/customIcon/NotificationIcon'; +import {Layout, Menu, theme, Button, Modal, MenuProps, Tabs} from 'antd'; +const { TabPane } = Tabs; + +import { Dropdown, Space } from 'antd'; +import '../../public/assets/knowledge-quest.css'; +import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'; +import dashboard from './dashboard'; +import directory from './directory'; + +let courseData = [ + { + id : "1", + title : "Life History of Dr. Maria Montessori", + chapter : "1", + Program : "Graduate Program", + img : "/assets/course1.jpg" + }, + { + id : "2", + title : "Introduction to Montessori Methods", + chapter : "2", + Program : "Graduate Program", + img : "/assets/course2.jpg" + }, + { + id : "3", + title : "Exercises on Practical Life", + chapter : "3", + Program : "Graduate Program", + img : "/assets/course3.jpg" + } +]; +let knowledgeData = [ + { + id: "1", + status: "1", + title: "Assessment on Special Education", + challenge: "Challenge yourself & climb the leaderboard.", + question: "Subjective Question", + img: "/assets/knowledge1.jpg" + }, + { + id: "2", + status: "1", + title: "Quiz on Children Psychology", + challenge: "Challenge yourself & climb the leaderboard.", + question: "MCQ", + img: "/assets/knowledge2.jpg" + }, + { + id: "3", + status: "1", + title: "Quiz on Montessori Methods", + challenge: "Challenge yourself & climb the leaderboard.", + question: "MCQ", + img: "/assets/knowledge3.jpg" + }, + { + id: "4", + status: "1", + title: "Assessment on Special Education", + challenge: "Challenge yourself & climb the leaderboard.", + question: "Subjective Question", + img: "/assets/knowledge1.jpg" + }, + { + id: "5", + status: "1", + title: "Quiz on Children Psychology", + challenge: "Challenge yourself & climb the leaderboard.", + question: "MCQ", + img: "/assets/knowledge2.jpg" + }, + { + id: "6", + status: "1", + title: "Quiz on Montessori Methods", + challenge: "Challenge yourself & climb the leaderboard.", + question: "MCQ", + img: "/assets/knowledge3.jpg" + }, + { + id: "7", + status: "1", + title: "Workshop on Child Development", + challenge: "Expand your knowledge & earn badges.", + question: "Interactive Session", + img: "/assets/knowledge1.jpg" + }, + { + id: "8", + status: "1", + title: "Webinar on Educational Psychology", + challenge: "Join & enhance your skills.", + question: "Discussion", + img: "/assets/knowledge2.jpg" + }, + { + id: "9", + status: "1", + title: "Seminar on Inclusive Education", + challenge: "Participate & gain insights.", + question: "Lecture", + img: "/assets/knowledge3.jpg" + }, + { + id: "10", + status: "1", + title: "Course on Early Childhood Education", + challenge: "Complete the course & get certified.", + question: "Multiple Modules", + img: "/assets/knowledge1.jpg" + }, + { + id: "11", + status: "1", + title: "Training on Classroom Management", + challenge: "Improve your teaching strategies.", + question: "Practical Tasks", + img: "/assets/knowledge2.jpg" + }, + { + id: "12", + status: "1", + title: "Lecture on Cognitive Development", + challenge: "Expand your understanding & get certified.", + question: "Q&A Session", + img: "/assets/knowledge3.jpg" + }, + { + id: "13", + status: "1", + title: "Workshop on Behavioral Issues", + challenge: "Join & learn from experts.", + question: "Interactive Session", + img: "/assets/knowledge1.jpg" + }, + { + id: "14", + status: "1", + title: "Seminar on Learning Disabilities", + challenge: "Participate & enhance your knowledge.", + question: "Lecture", + img: "/assets/knowledge2.jpg" + }, + { + id: "15", + status: "1", + title: "Webinar on Child Psychology", + challenge: "Join & expand your skills.", + question: "Discussion", + img: "/assets/knowledge3.jpg" + }, + { + id: "16", + status: "1", + title: "Course on Special Education Needs", + challenge: "Complete the course & get certified.", + question: "Multiple Modules", + img: "/assets/knowledge1.jpg" + }, + { + id: "17", + status: "1", + title: "Training on Autism Spectrum Disorder", + challenge: "Improve your teaching strategies.", + question: "Practical Tasks", + img: "/assets/knowledge2.jpg" + }, + { + id: "18", + status: "1", + title: "Lecture on Emotional Development", + challenge: "Expand your understanding & get certified.", + question: "Q&A Session", + img: "/assets/knowledge3.jpg" + }, + { + id: "19", + status: "1", + title: "Workshop on ADHD", + challenge: "Join & learn from experts.", + question: "Interactive Session", + img: "/assets/knowledge1.jpg" + }, + { + id: "20", + status: "1", + title: "Seminar on Speech and Language Disorders", + challenge: "Participate & enhance your knowledge.", + question: "Lecture", + img: "/assets/knowledge2.jpg" + }, + { + id: "21", + status: "1", + title: "Webinar on Child Nutrition", + challenge: "Join & expand your skills.", + question: "Discussion", + img: "/assets/knowledge3.jpg" + } +]; + + +let performersData = [ + { + id: "1", + name: "Eiden", + score: "48/50", + points: "999", + rank: "1", + program: "Graduate Program", + avatar: "/assets/avatar1.png" + }, + { + id: "2", + name: "Jackson", + score: "45/50", + points: "997", + rank: "2", + program: "Graduate Program", + avatar: "/assets/avatar2.png" + }, + { + id: "3", + name: "Emma Aria", + score: "43/50", + points: "994", + rank: "3", + program: "Graduate Program", + avatar: "/assets/avatar3.png" + }, + { + id: "4", + name: "John Doe", + score: "40/50", + points: "990", + rank: "4", + program: "Graduate Program", + avatar: "/assets/avatar4.png" + }, + { + id: "5", + name: "Jane Cooper", + score: "37/50", + points: "987", + rank: "5", + program: "Graduate Program", + avatar: "/assets/avatar5.png" + }, + { + id: "6", + name: "John Doe", + score: "35/50", + points: "982", + rank: "6", + program: "Graduate Program", + avatar: "/assets/avatar6.png" + }, + { + id: "7", + name: "Alice", + score: "33/50", + points: "980", + rank: "7", + program: "Graduate Program", + avatar: "/assets/avatar1.png" + }, + { + id: "8", + name: "Bob", + score: "32/50", + points: "978", + rank: "8", + program: "Graduate Program", + avatar: "/assets/avatar2.png" + }, + { + id: "9", + name: "Charlie", + score: "30/50", + points: "975", + rank: "9", + program: "Graduate Program", + avatar: "/assets/avatar3.png" + }, + { + id: "10", + name: "Diana", + score: "28/50", + points: "972", + rank: "10", + program: "Graduate Program", + avatar: "/assets/avatar4.png" + }, + { + id: "11", + name: "Edward", + score: "27/50", + points: "970", + rank: "11", + program: "Graduate Program", + avatar: "/assets/avatar5.png" + }, + { + id: "12", + name: "Fiona", + score: "26/50", + points: "968", + rank: "12", + program: "Graduate Program", + avatar: "/assets/avatar6.png" + }, + { + id: "13", + name: "George", + score: "25/50", + points: "965", + rank: "13", + program: "Graduate Program", + avatar: "/assets/avatar1.png" + }, + { + id: "14", + name: "Hannah", + score: "23/50", + points: "962", + rank: "14", + program: "Graduate Program", + avatar: "/assets/avatar2.png" + }, + { + id: "15", + name: "Ian", + score: "22/50", + points: "960", + rank: "15", + program: "Graduate Program", + avatar: "/assets/avatar3.png" + }, + { + id: "16", + name: "Julia", + score: "20/50", + points: "957", + rank: "16", + program: "Graduate Program", + avatar: "/assets/avatar4.png" + }, + { + id: "17", + name: "Kyle", + score: "19/50", + points: "955", + rank: "17", + program: "Graduate Program", + avatar: "/assets/avatar5.png" + }, + { + id: "18", + name: "Laura", + score: "18/50", + points: "953", + rank: "18", + program: "Graduate Program", + avatar: "/assets/avatar6.png" + }, + { + id: "19", + name: "Michael", + score: "17/50", + points: "950", + rank: "19", + program: "Graduate Program", + avatar: "/assets/avatar1.png" + }, + { + id: "20", + name: "Nancy", + score: "16/50", + points: "947", + rank: "20", + program: "Graduate Program", + avatar: "/assets/avatar2.png" + }, + { + id: "21", + name: "Oliver", + score: "15/50", + points: "945", + rank: "21", + program: "Graduate Program", + avatar: "/assets/avatar3.png" + } +]; + + +const sortedData = performersData.sort((a, b) => parseInt(a.rank) - parseInt(b.rank)); + +const highestRank = sortedData[0]; +const secondHighestRank = sortedData[1]; +const thirdHighestRank = sortedData[2]; + +console.log('The highest rank is:', highestRank); +console.log('The second highest rank is:', secondHighestRank); +console.log('The Third highest rank is:', thirdHighestRank); + + + +// const highestRank = performersData.reduce((prev, current) => (prev.rank < current.rank) ? prev : current); + +// console.log('The highest rank is:', highestRank); + +const { Header, Content, Sider } = Layout; + +const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({ + key, + label: `navkq ${key}`, +})); + +type MenuItem = Required['items'][number]; + + +const items2: MenuProps['items'] = [ + { + key: 'subkq1', + icon: , + label: 'Administration', + children: [ + { + key: '1kq', + // label: (Class Schedules), + label: (Class Schedules), + }, + { + key: '2kq', + // label: (Classmate Directory), + label: (Classmate Directory), + }, + { + key: '3kq', + label: (Qualifications), + }, + ], + }, + { + key: 'subkq2', + icon: , + label: 'My Courses', + children: [ + { + key: '4kq', + label: (Graduate Program), + }, + { + key: '5kq', + label: (Post-Graduate Program), + }, + ], + }, + { + key: 'subkq3', + icon: , + label: 'Examinations', + children: [ + { + key: '6kq', + label: (Exam Schedules), + }, + { + key: '7kq', + label: (Upcoming Exam), + }, + { + key: '8kq', + label: (Passed Exam), + }, + ], + }, + { + key: 'subkq4', + icon: , + label: 'Community', + children: [ + { + key: '9kq', + label: (Exam Scheduled), + }, + { + key: '10kq', + label: (Upcoming Exam), + }, + { + key: '11kq', + label: (Passed Exam), + }, + ], + }, + { + key: 'subkq5', + icon: , + label: 'Notifications', + children: [ + { + key: '12kq', + label: (Exam Scheduled), + }, + { + key: '13kq', + label: (Upcoming Exam), + }, + { + key: '14kq', + label: (Passed Exam), + }, + ], + }, + // getItem('Files', '9', ), + { + key: 'grp', + label: '', + type: 'group', + style: { marginTop: '100px' }, + children: [ + { + key: '15kq', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + icon: React.createElement(SettingOutlined, { style: { color: '#000' } }), + label: (

Settings

) + }, + { + key: '16kq', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + icon: React.createElement(QuestionCircleOutlined, { style: { color: '#000' } }), + label: (

Help & Support

) + }, + { + key: '17kq', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + icon: React.createElement(LogoutOutlined, { style: { color: '#000' } }), + label: (

Logout

) + }, + ], + }, +]; +const items: MenuProps['items'] = [ + { + label: 1st menu item, + key: '01kq', + }, + { + type: 'divider', + }, + { + label: 2nd menu item, + key: '02kq', + }, + { + type: 'divider', + }, + { + label: '3rd menu item', + key: '03kq', + }, + ]; + +const App: React.FC = () => { + const [collapsed, setCollapsed] = useState(false); + const [open, setOpen] = React.useState(false); + const [loading, setLoading] = React.useState(true); + + const showLoading = () => { + setOpen(true); + setLoading(true); + + // Simple loading mock. You should add cleanup logic in real world. + setTimeout(() => { + setLoading(false); + }, 100); + }; + const { token: { colorBgContainer}, } = theme.useToken(); + + return ( + + + + + + + + <> + + {/* */} + Loading Modal

} footer={ } loading={loading} open={open} onCancel={() => setOpen(false)} > +

Some contents...

+

Some contents...

+

Some contents...

+ + + {/*
+
+ +
*/} + +
+ + + setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0, background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}> +
+
+

IIMTT Logo

+
+
+ + +
+ {/* defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} */} + + +
+
+
+ {/* */} +

Knowledge Quests

+
+
+ + + + e.preventDefault()}> + +
+ +
+

My Profile

+

Rayan Holiday

+
+ +
+ + + +
+
+
+
+
+
+
+ + +
+ {knowledgeData.map(data => ( +
+
+ +
+

{data.title}

+

{data.challenge}

+

{data.question}

+
+
+ +
+ ))} +
+ + +
+ {knowledgeData.map(data => ( +
+
+ +
+

{data.title}

+

{data.challenge}

+

{data.question}

+
+
+

Review

+
+ ))} +
+ + +
+ {/*

Knowledge Quests

*/} +
+
+

Top Performers

+

Knowledge Quest

+
+
+
+ + +
+

{secondHighestRank.name}

+

{secondHighestRank.score}

+
+
+
+ + + +
+

{highestRank.name}

+

{highestRank.score}

+
+
+
+ + +
+

{thirdHighestRank.name}

+

{thirdHighestRank.score}

+
+
+
+ {sortedData.slice(3).map(data => ( +
+

# {data.rank}

+ +
+

{data.name}

+

{data.program}

+
+
+ +

{data.points} Points

+
+
+ ))} +
+
+
+
+ + + + + ); +}; +export default App; \ No newline at end of file diff --git a/public/assets/calendar-icon.svg b/public/assets/calendar-icon.svg new file mode 100644 index 0000000..4bbdfad --- /dev/null +++ b/public/assets/calendar-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/left_side_nav.css b/public/assets/left_side_nav.css new file mode 100644 index 0000000..9a26c41 --- /dev/null +++ b/public/assets/left_side_nav.css @@ -0,0 +1,107 @@ +.ant-menu-light .ant-menu-item-selected{ + color: #ED9545; + border-left: 3px solid #ED9545 ; + background: transparent; +} +/* App.css */ +.custom-menu .ant-menu-item{ + border-radius: 0; /* Remove border-radius */ + color: #6E6E6E; +} + +:where(.css-dev-only-do-not-override-1uq9j6g).ant-menu-light .ant-menu-item a, :where(.css-dev-only-do-not-override-1uq9j6g).ant-menu-light>.ant-menu .ant-menu-item a, :where(.css-dev-only-do-not-override-1uq9j6g).ant-menu-light .ant-menu-item a:hover, :where(.css-dev-only-do-not-override-1uq9j6g).ant-menu-light>.ant-menu .ant-menu-item a:hover{ + color: #6E6E6E; +} + + +/* Specific styling for parent menu items (non-selected) */ +.custom-menu .ant-menu-submenu-title { + border-bottom: 1px solid #CFCFCF; /* Default border color for parent items */ + border-radius: 0; /* Remove border-radius for parent items */ + font-size: 18px; + color: #000; + font-weight: 700; + padding-top: 40px; + padding-bottom: 40px; + --icon-color: #000; /* Default icon color */ +} + +/* Specific styling for selected parent menu items */ +.custom-menu .ant-menu-submenu-selected .ant-menu-submenu-title, +.custom-menu .ant-menu-submenu-title.ant-menu-submenu-title-selected, +.custom-menu .ant-menu-submenu-title .ant-menu-submenu-open { + color: #ED9545; /* Selected text color for parent items */ + border-bottom: 1px solid #CFCFCF; /* Selected border color for parent items */ + --icon-color: #ED9545; /* Selected icon color */ +} + + + +/* Ensure parent item remains #ED9545 when any child is selected */ +.custom-menu .ant-menu-submenu-open > .ant-menu-submenu-title { + color: #ED9545; /* Ensure parent item text color */ + border-bottom: 1px solid #CFCFCF; /* Ensure parent item border color */ + --icon-color: #ED9545; /* Ensure parent item icon color */ +} + +/* Ensure parent item text color reverts to #000 when submenu is collapsed */ +.custom-menu .ant-menu-submenu-closed > .ant-menu-submenu-title { + color: #000; /* Ensure parent item text color */ + --icon-color: #000; /* Ensure parent item icon color */ +} + + + +/* For Custom Scrollbar */ + +/* Custom scrollbar for WebKit browsers */ +::-webkit-scrollbar { + width: 3px; /* Width of the scrollbar */ + } + + ::-webkit-scrollbar-track { + background: #fcfcfc; /* Track background */ + } + + ::-webkit-scrollbar-thumb { + background: #CFCFCF; /* Scrollbar color */ + border-radius: 10px; /* Rounded corners */ + } + + ::-webkit-scrollbar-thumb:hover { + background: #555; /* Color when hovering */ + } +/* Firefox scrollbar styling */ + +.custom-gradient-border { + border: 4.32px solid transparent; + border-image-source: linear-gradient(159.09deg, #FFFFFF 13.82%, rgba(0, 0, 0, 0) 97.01%); + border-image-slice: 1; + border-radius: 8px; /* Adjust as needed */ +} +.ant-layout-sider-children .ant-dropdown-trigger{ + display: none; +} + +@media(max-width:1000px){ + :where(.css-dev-only-do-not-override-1uq9j6g).ant-layout { + display: flex; + flex: auto; + min-height: 0; + background: #f5f5f5; + } + :where(.css-dev-only-do-not-override-1uq9j6g).ant-layout.ant-layout-has-sider >.ant-layout, :where(.css-dev-only-do-not-override-1uq9j6g).ant-layout.ant-layout-has-sider >.ant-layout-content { + width: auto; + } + .md\:grid-cols-\[350px_1fr\] { + grid-template-columns:1fr; +} +a.ant-dropdown-trigger{ + display: none; +} +.ant-layout-sider-children .ant-dropdown-trigger{ + display: block; + margin-left: 28px; +} + +}