diff --git a/app/components/KnowledgeQuest.tsx b/app/components/KnowledgeQuest.tsx new file mode 100644 index 0000000..1e52ee2 --- /dev/null +++ b/app/components/KnowledgeQuest.tsx @@ -0,0 +1,746 @@ +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'; + +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), + }, + { + key: '2kq', + 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 Scheduled), + }, + { + 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/app/components/StudentDashboard.tsx b/app/components/StudentDashboard.tsx new file mode 100644 index 0000000..ccc5b13 --- /dev/null +++ b/app/components/StudentDashboard.tsx @@ -0,0 +1,468 @@ +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} from 'antd'; +import { Dropdown, Space } from 'antd'; +import '../../public/assets/student-dashboard.css'; + +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" + } +]; + +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" + } +]; + +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: `navsd ${key}`, +})); + +type MenuItem = Required['items'][number]; + + +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', + }, + ]; + +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'}}> + + + +
+ {/* defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} */} + + +
+
+
+ +

Student Dashboard

+
+ +
+
+
+
+

Graduate Program

+
+
+
+
+

Continue Learning

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

{data.title}

+

+ Chapter {data.chapter} •   + {data.Program} +

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

Knowledge Quests

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

{data.title}

+

{data.challenge}

+

{data.question}

+
+
+ +
+ ))} +
+
+
+

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/app/components/TestComponent.tsx b/app/components/TestComponent.tsx index e9c712e..e8703c7 100644 --- a/app/components/TestComponent.tsx +++ b/app/components/TestComponent.tsx @@ -235,7 +235,7 @@ const App: React.FC = () => {
-
+

Student Dashboard

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

Course Content

{courseData.map(data=>( @@ -284,7 +284,7 @@ const App: React.FC = () => {
-
+
diff --git a/app/components/TestComponent2.tsx b/app/components/TestComponent2.tsx new file mode 100644 index 0000000..0e8b9a2 --- /dev/null +++ b/app/components/TestComponent2.tsx @@ -0,0 +1,356 @@ +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} from 'antd'; +import { Dropdown, Space } from 'antd'; +import '../../public/assets/ss1.css'; + +let courseData = [ + { + id : "1", + title : "Life History of Dr. Maria Montessori", + chapter : "1", + Program : "Graduate Program", + img : "../../assets/course-blank.jpg" + }, + { + id : "2", + title : "Introduction to Montessori Methods", + chapter : "2", + Program : "Graduate Program", + img : "../../assets/course-blank.jpg" + }, + { + id : "3", + title : "Exercises on Practical Life", + chapter : "3", + Program : "Graduate Program", + img : "../../assets/course-blank.jpg" + } + ] + +const { Header, Content, Sider } = Layout; + +const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({ + key, + label: `navx ${key}`, +})); + +type MenuItem = Required['items'][number]; + + +const items2: MenuProps['items'] = [ + { + key: 'subx1', + icon: , + label: 'Administration', + children: [ + { + key: '1x', + label: (Class Schedules), + }, + { + key: '2x', + label: (Classmate Directory), + }, + { + key: '3x', + label: (Qualifications), + }, + ], + }, + { + key: 'subx2', + icon: , + label: 'My Courses', + children: [ + { + key: '4x', + label: (Graduate Program), + }, + { + key: '5x', + label: (Post-Graduate Program), + }, + ], + }, + { + key: 'subx3', + icon: , + label: 'Examinations', + children: [ + { + key: '6x', + label: (Exam Scheduled), + }, + { + key: '7x', + label: (Upcoming Exam), + }, + { + key: '8x', + label: (Passed Exam), + }, + ], + }, + { + key: 'subx4', + icon: , + label: 'Community', + children: [ + { + key: '9x', + label: (Exam Scheduled), + }, + { + key: '10x', + label: (Upcoming Exam), + }, + { + key: '11x', + label: (Passed Exam), + }, + ], + }, + { + key: 'subx5', + icon: , + label: 'Notifications', + children: [ + { + key: '12x', + label: (Exam Scheduled), + }, + { + key: '13x', + label: (Upcoming Exam), + }, + { + key: '14x', + label: (Passed Exam), + }, + ], + }, + // getItem('Files', '9', ), + { + key: 'grp', + label: '', + type: 'group', + style: { marginTop: '100px' }, + children: [ + { + key: '15x', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, + icon: React.createElement(SettingOutlined, { style: { color: '#FFF' } }), + label: (

Settings

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

Help & Support

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

Logout

) + }, + ], + }, +]; +const items: MenuProps['items'] = [ + { + label: 1st menu item, + key: '01', + }, + { + type: 'divider', + }, + { + label: 2nd menu item, + key: '02', + }, + { + type: 'divider', + }, + { + label: '3rd menu item', + key: '03', + }, + ]; + +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={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'}}> + + + +
+ {/* defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} */} + + +
+
+
+ +

Student Dashboard

+
+ +
+
+
+
+

Course Content

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

{data.title}

+

+ Chapter {data.chapter} •   + {data.Program} +

+
+ ))} +
+
+
+
+
+
+
+
+
+

Attendance

+ +
+

Graph

+
+
+
+

Upcoming Classes

+ +
+
+
+
+
+
+
+
+
+

Accomplishments / Qualifications

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

Upcoming Tests

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ + + + + ); +}; + +export default App; diff --git a/app/routes/about.tsx b/app/routes/about.tsx deleted file mode 100644 index a39e2a3..0000000 --- a/app/routes/about.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import type { MetaFunction } from "@remix-run/node"; -import TestComponent from '../components/TestComponent'; // Fix typo here - -export default function Index() { - return ( -
- {/* Ensure the component name matches the import */} -
- ); -} diff --git a/app/routes/knowledge-quest.tsx b/app/routes/knowledge-quest.tsx new file mode 100644 index 0000000..237ca3a --- /dev/null +++ b/app/routes/knowledge-quest.tsx @@ -0,0 +1,10 @@ +import type { MetaFunction } from "@remix-run/node"; +import KnowledgeQuest from '../components/KnowledgeQuest' + +export default function Index() { + return ( +
+ {/* Ensure the component name matches the import */} +
+ ); +} diff --git a/app/routes/student-dashboard2.tsx b/app/routes/student-dashboard2.tsx new file mode 100644 index 0000000..99bc5dc --- /dev/null +++ b/app/routes/student-dashboard2.tsx @@ -0,0 +1,10 @@ +import type { MetaFunction } from "@remix-run/node"; +import StudentDashboard from '../components/StudentDashboard' + +export default function Index() { + return ( +
+ {/* Ensure the component name matches the import */} +
+ ); +} diff --git a/app/routes/test2.tsx b/app/routes/test2.tsx new file mode 100644 index 0000000..1e01811 --- /dev/null +++ b/app/routes/test2.tsx @@ -0,0 +1,476 @@ +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'; + +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" + } +]; + +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" + } +]; + +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), + }, + { + key: '2kq', + 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 Scheduled), + }, + { + 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={310} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0, background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}> + + + +
+ {/* 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}

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

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/package.json b/package.json index bcaf8de..6090ca6 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "type": "module", "scripts": { "build": "remix vite:build", - "dev": "remix vite:dev", + "dev": "remix vite:dev --host 0.0.0.0", "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .", "start": "remix-serve ./build/server/index.js", "typecheck": "tsc" diff --git a/public/assets/ai-button-icon.svg b/public/assets/ai-button-icon.svg new file mode 100644 index 0000000..da579d3 --- /dev/null +++ b/public/assets/ai-button-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/avatar1.png b/public/assets/avatar1.png new file mode 100644 index 0000000..db2ff2e Binary files /dev/null and b/public/assets/avatar1.png differ diff --git a/public/assets/avatar2.png b/public/assets/avatar2.png new file mode 100644 index 0000000..f8c024e Binary files /dev/null and b/public/assets/avatar2.png differ diff --git a/public/assets/avatar3.png b/public/assets/avatar3.png new file mode 100644 index 0000000..2e7473a Binary files /dev/null and b/public/assets/avatar3.png differ diff --git a/public/assets/avatar4.png b/public/assets/avatar4.png new file mode 100644 index 0000000..04027fe Binary files /dev/null and b/public/assets/avatar4.png differ diff --git a/public/assets/avatar5.png b/public/assets/avatar5.png new file mode 100644 index 0000000..215c2e6 Binary files /dev/null and b/public/assets/avatar5.png differ diff --git a/public/assets/avatar6.png b/public/assets/avatar6.png new file mode 100644 index 0000000..20c9dce Binary files /dev/null and b/public/assets/avatar6.png differ diff --git a/public/assets/bacth1.svg b/public/assets/bacth1.svg new file mode 100644 index 0000000..4efc331 --- /dev/null +++ b/public/assets/bacth1.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/public/assets/bacth2.svg b/public/assets/bacth2.svg new file mode 100644 index 0000000..0be0746 --- /dev/null +++ b/public/assets/bacth2.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/assets/bacth3.svg b/public/assets/bacth3.svg new file mode 100644 index 0000000..3b1839c --- /dev/null +++ b/public/assets/bacth3.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/assets/crown.png b/public/assets/crown.png new file mode 100644 index 0000000..78a7b2c Binary files /dev/null and b/public/assets/crown.png differ diff --git a/public/assets/knowledge-quest.css b/public/assets/knowledge-quest.css new file mode 100644 index 0000000..566c483 --- /dev/null +++ b/public/assets/knowledge-quest.css @@ -0,0 +1,115 @@ + + +.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-tabs-nav { + border-bottom: none; + color: #EF7A0C; +} + +/* Optional: Style the tab bar ink */ +.ant-tabs-ink-bar { + background-color: #000; + color: #EF7A0C; +} + +:where(.css-dev-only-do-not-override-1uq9j6g).ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn{ + color: #EF7A0C; +} + +:where(.css-dev-only-do-not-override-1uq9j6g).ant-tabs .ant-tabs-tab { + color: #9D9D9D; + font-weight: 700; + font-size: 18px; + padding: 15px 20px; + +} +:where(.css-dev-only-do-not-override-1uq9j6g).ant-tabs .ant-tabs-tab:hover{ + color: #EF7A0C; +} + +.ant-tabs-tab.ant-tabs-tab-active { + border-bottom: 4px solid #EF7A0C; + width: 70px; + z-index: 2; + justify-content: center; +} \ No newline at end of file diff --git a/public/assets/knowledge1.jpg b/public/assets/knowledge1.jpg new file mode 100644 index 0000000..3fb7c1f Binary files /dev/null and b/public/assets/knowledge1.jpg differ diff --git a/public/assets/knowledge2.jpg b/public/assets/knowledge2.jpg new file mode 100644 index 0000000..22e157d Binary files /dev/null and b/public/assets/knowledge2.jpg differ diff --git a/public/assets/knowledge3.jpg b/public/assets/knowledge3.jpg new file mode 100644 index 0000000..8fbe12a Binary files /dev/null and b/public/assets/knowledge3.jpg differ diff --git a/public/assets/points-icon.svg b/public/assets/points-icon.svg new file mode 100644 index 0000000..2393268 --- /dev/null +++ b/public/assets/points-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/student-dashboard.css b/public/assets/student-dashboard.css new file mode 100644 index 0000000..bf49270 --- /dev/null +++ b/public/assets/student-dashboard.css @@ -0,0 +1,83 @@ + + +.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 */ +}