diff --git a/app/component/TestComponent.tsx b/app/component/TestComponent.tsx deleted file mode 100644 index 78ef23b..0000000 --- a/app/component/TestComponent.tsx +++ /dev/null @@ -1,360 +0,0 @@ -import React from 'react'; -import { LaptopOutlined, SettingOutlined, QuestionCircleOutlined, LogoutOutlined, UserOutlined, DownOutlined, FileOutlined} from '@ant-design/icons'; -import Icon from '@ant-design/icons'; -import { createFromIconfontCN } from '@ant-design/icons'; - -import {Layout, Menu, theme, Button, Modal, MenuProps} from 'antd'; -import { Dropdown, Space } from 'antd'; -import '../../public/assets/ss.css' - -const administrationIcon = (props) => ( - } /> -); -const examinationIcon = () => ( - } /> -); -const myCoursesIcon = () => ( - } /> -); -const communityIcon = () => ( - } /> -); -const notificationIcon = () => ( - } /> -); - -const { Header, Content, Sider } = Layout; - -const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({ - key, - label: `nav ${key}`, -})); - -type MenuItem = Required['items'][number]; - -// function getItem( -// label: React.ReactNode, -// key: React.Key, -// icon?: React.ReactNode, -// children?: MenuItem[], -// ): MenuItem { -// return { -// key, -// icon, -// children, -// label, -// } as MenuItem; -// } - - - const items2: MenuProps['items'] = [ - { - key: 'sub1', - icon: , - label: 'Administration', - children: [ - { - key: '1', - label: (Class Schedules), - }, - { - key: '2', - label: (Classmate Directory), - }, - { - key: '3', - label: (Qualifications), - }, - ], - }, - { - key: 'sub2', - icon: , - label: 'My Courses', - children: [ - { - key: '4', - label: (Graduate Program), - }, - { - key: '5', - label: (Post-Graduate Program), - }, - ], - }, - { - key: 'sub3', - icon: , - label: 'Examinations', - children: [ - { - key: '7', - label: (Exam Scheduled), - }, - { - key: '8', - label: (Upcoming Exam), - }, - { - key: '9', - label: (Passed Exam), - }, - ], - }, - { - key: 'sub4', - icon: , - label: 'Community', - children: [ - { - key: '7', - label: (Exam Scheduled), - }, - { - key: '8', - label: (Upcoming Exam), - }, - { - key: '9', - label: (Passed Exam), - }, - ], - }, - { - key: 'sub5', - icon: , - label: 'Notifications', - children: [ - { - key: '7', - label: (Exam Scheduled), - }, - { - key: '8', - label: (Upcoming Exam), - }, - { - key: '9', - label: (Passed Exam), - }, - ], - }, - // getItem('Files', '9', ), - { - key: 'grp', - label: '', - type: 'group', - style: { marginTop: '100px' }, - children: [ - { key: '13', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, icon: React.createElement(SettingOutlined), label: (

Settings

) }, - { key: '14', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, icon: React.createElement(QuestionCircleOutlined), label: (

Help & Support

) }, - { key: '15', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, icon: React.createElement(LogoutOutlined), label: (

Logout

) }, - ], - }, -]; -const items: MenuProps['items'] = [ - { - label: 1st menu item, - key: '0', - }, - { - type: 'divider', - }, - { - label: 2nd menu item, - key: '1', - }, - { - type: 'divider', - }, - { - label: '3rd menu item', - key: '3', - }, - ]; - -const App: React.FC = () => { - 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...

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

Flex Content - 1

-
-
-

Life History of Dr. Maria Montessori

-

Chapter 1 * Graduate Program

-
-
- -
-
-

Flex Content - 2

-
-
-

Life History of Dr. Maria Montessori

-

Chapter 2 * Graduate Program

-
-
-
-
-

Flex Content - 3

-
-
-

Life History of Dr. Maria Montessori

-

Chapter 3 * Graduate Program

-
-
-
-
-
-
-
-
-

Attendance

-

- - - -

-
-
-

Attendance - 1

-

Attendance - 2

-

Attendance - 3

-

Attendance - 4

-

Attendance - 5

-
-
-
-
-

Upcoming Classes

-

- - - -

-
-
-

Upcoming Class - 1

-

Upcoming Class - 2

-

Upcoming Class - 3

-

Upcoming Class - 4

-

Upcoming Class - 5

-
-
-
-
-

Accomplishments/Qualifications

-
-
-
-
-
-
-
-
-
-
-
-
-

Upcoming Tests

-
-

Upcoming Test - 1

-

Upcoming Test - 2

-

Upcoming Test - 3

-

Upcoming Test - 4

-

Upcoming Test - 5

-

Upcoming Test - 7

-

Upcoming Test - 8

-

Upcoming Test - 9

-
-
-
- - - - - ); -}; - -export default App; diff --git a/app/components/TestComponent.tsx b/app/components/TestComponent.tsx new file mode 100644 index 0000000..e9c712e --- /dev/null +++ b/app/components/TestComponent.tsx @@ -0,0 +1,355 @@ +import React 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/ss.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: `nav ${key}`, +})); + +type MenuItem = Required['items'][number]; + + +const items2: MenuProps['items'] = [ + { + key: 'sub1', + icon: , + label: 'Administration', + children: [ + { + key: '1', + label: (Class Schedules), + }, + { + key: '2', + label: (Classmate Directory), + }, + { + key: '3', + label: (Qualifications), + }, + ], + }, + { + key: 'sub2', + icon: , + label: 'My Courses', + children: [ + { + key: '4', + label: (Graduate Program), + }, + { + key: '5', + label: (Post-Graduate Program), + }, + ], + }, + { + key: 'sub3', + icon: , + label: 'Examinations', + children: [ + { + key: '6', + label: (Exam Scheduled), + }, + { + key: '7', + label: (Upcoming Exam), + }, + { + key: '8', + label: (Passed Exam), + }, + ], + }, + { + key: 'sub4', + icon: , + label: 'Community', + children: [ + { + key: '9', + label: (Exam Scheduled), + }, + { + key: '10', + label: (Upcoming Exam), + }, + { + key: '11', + label: (Passed Exam), + }, + ], + }, + { + key: 'sub5', + icon: , + label: 'Notifications', + children: [ + { + key: '12', + label: (Exam Scheduled), + }, + { + key: '13', + label: (Upcoming Exam), + }, + { + key: '14', + label: (Passed Exam), + }, + ], + }, + // getItem('Files', '9', ), + { + key: 'grp', + label: '', + type: 'group', + style: { marginTop: '100px' }, + children: [ + { key: '15', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, icon: React.createElement(SettingOutlined), label: (

Settings

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

Help & Support

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

Logout

) }, + ], + }, +]; +const items: MenuProps['items'] = [ + { + label: 1st menu item, + key: '0', + }, + { + type: 'divider', + }, + { + label: 2nd menu item, + key: '1', + }, + { + type: 'divider', + }, + { + label: '3rd menu item', + key: '3', + }, + ]; + +const App: React.FC = () => { + 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...

+ + + {/*
+
+ +
*/} + + + + + + {/* 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/components/customIcon/AdministrationIcon.tsx b/app/components/customIcon/AdministrationIcon.tsx new file mode 100644 index 0000000..eff14aa --- /dev/null +++ b/app/components/customIcon/AdministrationIcon.tsx @@ -0,0 +1,19 @@ +// app/components/AdministrationIcon.jsx +import React from 'react'; + +const AdministrationIcon = () => ( + + + +); + +export default AdministrationIcon; diff --git a/app/components/customIcon/CommunityIcon.tsx b/app/components/customIcon/CommunityIcon.tsx new file mode 100644 index 0000000..8c282ba --- /dev/null +++ b/app/components/customIcon/CommunityIcon.tsx @@ -0,0 +1,11 @@ + // app/components/CommunityIcon.jsx + import React from 'react'; + +const CommunityIcon = () => ( + + + +); + + export default CommunityIcon; \ No newline at end of file diff --git a/app/components/customIcon/ExaminationIcon.tsx b/app/components/customIcon/ExaminationIcon.tsx new file mode 100644 index 0000000..e7c8819 --- /dev/null +++ b/app/components/customIcon/ExaminationIcon.tsx @@ -0,0 +1,13 @@ + // app/components/ExaminationIcon.jsx + import React from 'react'; + +const ExaminationIcon = () => ( + + + +); + + export default ExaminationIcon; + + diff --git a/app/components/customIcon/MyCoursesIcon.tsx b/app/components/customIcon/MyCoursesIcon.tsx new file mode 100644 index 0000000..4c2f489 --- /dev/null +++ b/app/components/customIcon/MyCoursesIcon.tsx @@ -0,0 +1,11 @@ + // app/components/MyCoursesIcon.jsx +import React from 'react'; + +const MyCoursesIcon = () => ( + + + +); + +export default MyCoursesIcon; diff --git a/app/components/customIcon/NotificationIcon.tsx b/app/components/customIcon/NotificationIcon.tsx new file mode 100644 index 0000000..4405f41 --- /dev/null +++ b/app/components/customIcon/NotificationIcon.tsx @@ -0,0 +1,11 @@ +// app/components/NotificationIcon.jsx + import React from 'react'; + +const NotificationIcon = () => ( + + + +); + + export default NotificationIcon; \ No newline at end of file diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx index 4254b4c..4f8595e 100644 --- a/app/routes/_index.tsx +++ b/app/routes/_index.tsx @@ -1,3 +1,11 @@ -import TestComponent from '../component/TestComponent' +import type { MetaFunction } from "@remix-run/node"; +import TestComponent from '../components/TestComponent'; // Fix typo here + +export default function Index() { + return ( +
+ +
+ ); +} - \ No newline at end of file diff --git a/app/routes/about.tsx b/app/routes/about.tsx index cfd780f..a39e2a3 100644 --- a/app/routes/about.tsx +++ b/app/routes/about.tsx @@ -1,5 +1,5 @@ import type { MetaFunction } from "@remix-run/node"; -import TestComponent from '../component/TestComponent'; // Fix typo here +import TestComponent from '../components/TestComponent'; // Fix typo here export default function Index() { return ( diff --git a/public/assets/course-blank.jpg b/public/assets/course-blank.jpg new file mode 100644 index 0000000..7a87a9b Binary files /dev/null and b/public/assets/course-blank.jpg differ diff --git a/public/assets/course1.jpg b/public/assets/course1.jpg new file mode 100644 index 0000000..ec985c5 Binary files /dev/null and b/public/assets/course1.jpg differ diff --git a/public/assets/course2.jpg b/public/assets/course2.jpg new file mode 100644 index 0000000..003acb5 Binary files /dev/null and b/public/assets/course2.jpg differ diff --git a/public/assets/course3.jpg b/public/assets/course3.jpg new file mode 100644 index 0000000..a83524f Binary files /dev/null and b/public/assets/course3.jpg differ diff --git a/public/assets/notifications.svg b/public/assets/notifications.svg index eb32a56..700ffba 100644 --- a/public/assets/notifications.svg +++ b/public/assets/notifications.svg @@ -1,5 +1,5 @@ - + diff --git a/public/assets/rectangle.jpg b/public/assets/rectangle.jpg new file mode 100644 index 0000000..df92ab6 Binary files /dev/null and b/public/assets/rectangle.jpg differ diff --git a/public/assets/right-arrow.svg b/public/assets/right-arrow.svg new file mode 100644 index 0000000..dff94e8 --- /dev/null +++ b/public/assets/right-arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/ss.css b/public/assets/ss.css index b13f3bc..9f188ea 100644 --- a/public/assets/ss.css +++ b/public/assets/ss.css @@ -1,25 +1,22 @@ -.ant-menu-item-selected { - /* background-color: #ED9545 !important; */ - border-left: 1px solid #CFCFCF ; + +.ant-menu-light .ant-menu-item-selected{ + color: #ED9545; + border-left: 3px solid #ED9545 ; + background: transparent; } /* App.css */ .custom-menu .ant-menu-item { - border-bottom: 1px solid #CFCFCF; /* Default border color */ border-radius: 0; /* Remove border-radius */ } -.custom-menu .ant-menu-item-selected { - border-bottom: 1px solid #CFCFCF; /* Selected border color */ -} - /* 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: 20px; + font-size: 18px; color: #000; font-weight: 700; padding-top: 40px; @@ -36,10 +33,7 @@ --icon-color: #ED9545; /* Selected icon color */ } -.custom-menu .ant-menu-submenu-title:hover { - color: #6E6E6E; /* Hover text color for parent items */ - border-bottom: 1px solid #CFCFCF; /* Hover border color for parent items */ -} + /* Ensure parent item remains #ED9545 when any child is selected */ .custom-menu .ant-menu-submenu-open > .ant-menu-submenu-title { @@ -53,3 +47,25 @@ color: #000; /* Ensure parent item text color */ --icon-color: #000; /* Ensure parent item icon color */ } + + +/* 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 */ + + \ No newline at end of file diff --git a/public/assets/student-dash.svg b/public/assets/student-dash.svg new file mode 100644 index 0000000..ded60de --- /dev/null +++ b/public/assets/student-dash.svg @@ -0,0 +1,4 @@ + + + + diff --git a/yarn.lock b/yarn.lock index 3fc3929..539e9ad 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1575,7 +1575,7 @@ ansi-styles@^6.1.0: antd@^5.19.3: version "5.19.3" - resolved "https://registry.npmjs.org/antd/-/antd-5.19.3.tgz" + resolved "https://registry.yarnpkg.com/antd/-/antd-5.19.3.tgz#d5a4eeca442ea3b2ed1913db6f44f8b603421f00" integrity sha512-rhGI6yyZ4dA2MWl9bfO0MZjtNwWdzITpp3u7pKLiQpTjJYFlpF5wDFgGaG1or3sqyBihvqcO/OF1hSggmWczbQ== dependencies: "@ant-design/colors" "^7.1.0"