generated from dwd/boilarplate-remix-tailwind-antd
frst Layout
Suvodip
parent
ccd6cd801f
commit
428cf0fffe
|
|
@ -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) => (
|
|
||||||
<Icon component={() => <img src="/assets/administration-icon.svg" {...props} />} />
|
|
||||||
);
|
|
||||||
const examinationIcon = () => (
|
|
||||||
<Icon component={() => <img src="/assets/examination-icon.svg" />} />
|
|
||||||
);
|
|
||||||
const myCoursesIcon = () => (
|
|
||||||
<Icon component={() => <img src="/assets/my-courses-icon.svg" />} />
|
|
||||||
);
|
|
||||||
const communityIcon = () => (
|
|
||||||
<Icon component={() => <img src="/assets/community-icon.svg" />} />
|
|
||||||
);
|
|
||||||
const notificationIcon = () => (
|
|
||||||
<Icon component={() => <img src="/assets/notification-icon.svg" />} />
|
|
||||||
);
|
|
||||||
|
|
||||||
const { Header, Content, Sider } = Layout;
|
|
||||||
|
|
||||||
const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
|
|
||||||
key,
|
|
||||||
label: `nav ${key}`,
|
|
||||||
}));
|
|
||||||
|
|
||||||
type MenuItem = Required<MenuProps>['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: <administrationIcon />,
|
|
||||||
label: 'Administration',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
key: '1',
|
|
||||||
label: (<a href='#'>Class Schedules</a>),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '2',
|
|
||||||
label: (<a href='#'>Classmate Directory</a>),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '3',
|
|
||||||
label: (<a href='#'>Qualifications</a>),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'sub2',
|
|
||||||
icon: <myCoursesIcon />,
|
|
||||||
label: 'My Courses',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
key: '4',
|
|
||||||
label: (<a href='#'>Graduate Program</a>),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '5',
|
|
||||||
label: (<a href='#'>Post-Graduate Program</a>),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'sub3',
|
|
||||||
icon: <examinationIcon />,
|
|
||||||
label: 'Examinations',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
key: '7',
|
|
||||||
label: (<a href='#'>Exam Scheduled</a>),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '8',
|
|
||||||
label: (<a href='#'>Upcoming Exam</a>),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '9',
|
|
||||||
label: (<a href='#'>Passed Exam</a>),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'sub4',
|
|
||||||
icon: <communityIcon />,
|
|
||||||
label: 'Community',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
key: '7',
|
|
||||||
label: (<a href='#'>Exam Scheduled</a>),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '8',
|
|
||||||
label: (<a href='#'>Upcoming Exam</a>),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '9',
|
|
||||||
label: (<a href='#'>Passed Exam</a>),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'sub5',
|
|
||||||
icon: <notificationIcon />,
|
|
||||||
label: 'Notifications',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
key: '7',
|
|
||||||
label: (<a href='#'>Exam Scheduled</a>),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '8',
|
|
||||||
label: (<a href='#'>Upcoming Exam</a>),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '9',
|
|
||||||
label: (<a href='#'>Passed Exam</a>),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
// getItem('Files', '9', <FileOutlined />),
|
|
||||||
{
|
|
||||||
key: 'grp',
|
|
||||||
label: '',
|
|
||||||
type: 'group',
|
|
||||||
style: { marginTop: '100px' },
|
|
||||||
children: [
|
|
||||||
{ key: '13', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, icon: React.createElement(SettingOutlined), label: (<h2>Settings</h2>) },
|
|
||||||
{ key: '14', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, icon: React.createElement(QuestionCircleOutlined), label: (<h2>Help & Support</h2>) },
|
|
||||||
{ key: '15', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, icon: React.createElement(LogoutOutlined), label: (<h2>Logout</h2>) },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const items: MenuProps['items'] = [
|
|
||||||
{
|
|
||||||
label: <a href="https://www.antgroup.com">1st menu item</a>,
|
|
||||||
key: '0',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'divider',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: <a href="https://www.aliyun.com">2nd menu item</a>,
|
|
||||||
key: '1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'divider',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '3rd menu item',
|
|
||||||
key: '3',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const App: React.FC = () => {
|
|
||||||
const [open, setOpen] = React.useState<boolean>(false);
|
|
||||||
const [loading, setLoading] = React.useState<boolean>(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 (
|
|
||||||
|
|
||||||
<Layout>
|
|
||||||
<>
|
|
||||||
{/* <Button type="primary" onClick={showLoading}>Open Modal</Button> */}
|
|
||||||
<Modal style={{top: '20px', right: '0px'}} title={<p>Loading Modal</p>} footer={ <Button type="primary" onClick={showLoading}> Reload </Button>} loading={loading} open={open} onCancel={() => setOpen(false)} >
|
|
||||||
<p>Some contents...</p>
|
|
||||||
<p>Some contents...</p>
|
|
||||||
<p>Some contents...</p>
|
|
||||||
</Modal>
|
|
||||||
</>
|
|
||||||
{/* <Header style={{ display: 'flex', alignItems: 'center' }}>
|
|
||||||
<div className="demo-logo" />
|
|
||||||
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} style={{ flex: 1, minWidth: 0 }} />
|
|
||||||
</Header> */}
|
|
||||||
<Layout >
|
|
||||||
<Sider width={290} style={{overflow: 'hidden', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0, background: colorBgContainer, borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
|
|
||||||
<div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', placeItems: 'center'}}>
|
|
||||||
<h1>IIMTT Logo</h1>
|
|
||||||
<a href="#" style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', placeItems: 'center', border: '1px solid #CFCFCF', borderRadius: '10px', marginRight: 20, marginLeft: 20, width: '90%', background: '#FFF'}}>
|
|
||||||
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'center', placeItems: 'center', height: '80px'}}>
|
|
||||||
<img src="/assets/man.png" alt="" />
|
|
||||||
<div style={{}}>
|
|
||||||
<span style={{fontSize: '16px'}}>My Profile</span><br />
|
|
||||||
<span style={{fontSize: '22px'}}>Rayan Holiday</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M12.9984 12.9597L8.39844 8.35972L9.79844 6.95972L15.7984 12.9597L9.79844 18.9597L8.39844 17.5597L12.9984 12.9597Z" fill="black"/>
|
|
||||||
</svg>
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<Menu className='custom-menu' mode="inline" style={{ height: '100%', borderRight: 0, background: '#FCFCFC', paddingTop: 50, color: '#000'}} items={items2} />
|
|
||||||
</Sider>
|
|
||||||
{/* defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} */}
|
|
||||||
<Layout style={{marginLeft: 290,}}>
|
|
||||||
<Content style={{ background: colorBgContainer, fontSize: 20, margin: '24px 16px 0', overflow: 'initial',}}>
|
|
||||||
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', borderBottom: '1px solid #CFCFCF', placeItems: 'center'}}>
|
|
||||||
<p style={{paddingLeft: 20}}>Student Dashboard</p>
|
|
||||||
<div>
|
|
||||||
<Button onClick={showLoading} style={{ border: 'none', paddingRight: 20}}>
|
|
||||||
<div className='' style={{border: '1px solid #FCFCFC', borderRadius: '50%', width: 47, height: 47}}>
|
|
||||||
<svg width="40" height="40" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M5.06445 20.2658V18.2111H7.1191V11.0198C7.1191 9.59872 7.54715 8.33597 8.40325 7.2316C9.25935 6.12723 10.3723 5.40382 11.742 5.06138V4.34225C11.742 3.9142 11.8919 3.55036 12.1915 3.25072C12.4911 2.95109 12.855 2.80127 13.283 2.80127C13.7111 2.80127 14.0749 2.95109 14.3746 3.25072C14.6742 3.55036 14.824 3.9142 14.824 4.34225V5.06138C16.1938 5.40382 17.3067 6.12723 18.1628 7.2316C19.0189 8.33597 19.447 9.59872 19.447 11.0198V18.2111H21.5016V20.2658H5.06445ZM13.283 23.3477C12.718 23.3477 12.2343 23.1465 11.8319 22.7442C11.4296 22.3418 11.2284 21.8581 11.2284 21.2931H15.3377C15.3377 21.8581 15.1365 22.3418 14.7341 22.7442C14.3318 23.1465 13.8481 23.3477 13.283 23.3477ZM9.17374 18.2111H17.3923V11.0198C17.3923 9.88979 16.99 8.9224 16.1852 8.11766C15.3805 7.31293 14.4131 6.91056 13.283 6.91056C12.153 6.91056 11.1856 7.31293 10.3808 8.11766C9.57611 8.9224 9.17374 9.88979 9.17374 11.0198V18.2111Z" fill="black"/>
|
|
||||||
<circle cx="19.4462" cy="19.2384" r="4.23771" fill="black" stroke="#fff" stroke-width="2.31148"/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</Button>
|
|
||||||
<Dropdown menu={{ items }} trigger={['click']}>
|
|
||||||
<a onClick={(e) => e.preventDefault()}>
|
|
||||||
<Space>
|
|
||||||
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'center', placeItems: 'center', border: '1px solid #CFCFCF', borderRadius: '30px', height: '50px' }}>
|
|
||||||
<img src="/assets/man.png" alt="" />
|
|
||||||
<div style={{padding: 5}}>
|
|
||||||
<p style={{fontSize: '14px'}}>My Profile <br /> Rayan Holiday</p>
|
|
||||||
{/* <p></p> */}
|
|
||||||
</div>
|
|
||||||
<DownOutlined style={{ fontSize: '12px' }} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</Space>
|
|
||||||
</a>
|
|
||||||
</Dropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingTop: 20, maxWidth: '90%', marginLeft: 'auto', marginRight: 'auto'}}>
|
|
||||||
<div style={{display: 'flex', flexDirection: 'column', width: '100%', marginLeft: 10, marginRight: 10}}>
|
|
||||||
<div style={{display: 'flex', justifyContent: 'center', placeItems: 'center', height: '250px', backgroundColor: '#FCFCFC', width: '100%', borderRadius: '20px'}}>
|
|
||||||
<h2>Flex Content - 1</h2>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p>Life History of Dr. Maria Montessori</p>
|
|
||||||
<p><span>Chapter 1</span> * <span>Graduate Program</span></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style={{display: 'flex', flexDirection: 'column', width: '100%', marginLeft: 10, marginRight: 10}}>
|
|
||||||
<div style={{display: 'flex', justifyContent: 'center', placeItems: 'center', height: '250px', backgroundColor: '#FCFCFC', width: '100%', borderRadius: '20px'}}>
|
|
||||||
<h2>Flex Content - 2</h2>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p>Life History of Dr. Maria Montessori</p>
|
|
||||||
<p><span>Chapter 2</span> * <span>Graduate Program</span></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style={{display: 'flex', flexDirection: 'column', width: '100%', marginLeft: 10, marginRight: 10}}>
|
|
||||||
<div style={{display: 'flex', justifyContent: 'center', placeItems: 'center', height: '250px', backgroundColor: '#FCFCFC', width: '100%', borderRadius: '20px'}}>
|
|
||||||
<h2>Flex Content - 3</h2>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p>Life History of Dr. Maria Montessori</p>
|
|
||||||
<p><span>Chapter 3</span> * <span>Graduate Program</span></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style={{display: 'flex', flexDirection: 'row', maxWidth: '90%', marginLeft: 'auto', marginRight: 'auto'}}>
|
|
||||||
<div style={{ width: '60%',}}>
|
|
||||||
<div style={{display: 'flex', flexDirection: 'row'}}>
|
|
||||||
<div style={{display: 'flex', flexDirection: 'column', margin: 10, backgroundColor: '#FCFCFC', width: '100%', borderRadius: '10px'}}>
|
|
||||||
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', placeItems: 'center', paddingLeft: 10, paddingRight: 10, borderBottom: '1px solid #CFCFCF'}}>
|
|
||||||
<h3>Attendance</h3>
|
|
||||||
<p>
|
|
||||||
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M12.9984 12.9597L8.39844 8.35972L9.79844 6.95972L15.7984 12.9597L9.79844 18.9597L8.39844 17.5597L12.9984 12.9597Z" fill="black"/>
|
|
||||||
</svg>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div style={{display: 'flex', flexDirection: 'column', margin: 10, backgroundColor: '#FCFCFC'}}>
|
|
||||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Attendance - 1</p>
|
|
||||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Attendance - 2</p>
|
|
||||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Attendance - 3</p>
|
|
||||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Attendance - 4</p>
|
|
||||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Attendance - 5</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style={{display: 'flex', flexDirection: 'column', margin: 10, backgroundColor: '#FCFCFC', width: '100%', borderRadius: '10px'}}>
|
|
||||||
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', placeItems: 'center', paddingLeft: 10, paddingRight: 10, borderBottom: '1px solid #CFCFCF'}}>
|
|
||||||
<h3>Upcoming Classes</h3>
|
|
||||||
<p>
|
|
||||||
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M12.9984 12.9597L8.39844 8.35972L9.79844 6.95972L15.7984 12.9597L9.79844 18.9597L8.39844 17.5597L12.9984 12.9597Z" fill="black"/>
|
|
||||||
</svg>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div style={{display: 'flex', flexDirection: 'column', margin: 10, backgroundColor: '#FCFCFC'}}>
|
|
||||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Class - 1</p>
|
|
||||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Class - 2</p>
|
|
||||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Class - 3</p>
|
|
||||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Class - 4</p>
|
|
||||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Class - 5</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style={{display: 'flex', flexDirection: 'column', margin: 10, backgroundColor: '#FCFCFC', borderRadius: '10px'}}>
|
|
||||||
<h3 style={{borderBottom: '1px solid #CFCFCF'}}>Accomplishments/Qualifications</h3>
|
|
||||||
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', padding:10}}>
|
|
||||||
<div style={{width: '103px', height: '104px', backgroundColor: '#CFCFCF', justifyContent: 'center', placeItems: 'center', borderRadius: '10px'}}></div>
|
|
||||||
<div style={{width: '103px', height: '104px', backgroundColor: '#CFCFCF', justifyContent: 'center', placeItems: 'center', borderRadius: '10px'}}></div>
|
|
||||||
<div style={{width: '103px', height: '104px', backgroundColor: '#CFCFCF', justifyContent: 'center', placeItems: 'center', borderRadius: '10px'}}></div>
|
|
||||||
<div style={{width: '103px', height: '104px', backgroundColor: '#CFCFCF', justifyContent: 'center', placeItems: 'center', borderRadius: '10px'}}></div>
|
|
||||||
<div style={{width: '103px', height: '104px', backgroundColor: '#CFCFCF', justifyContent: 'center', placeItems: 'center', borderRadius: '10px'}}></div>
|
|
||||||
<div style={{width: '103px', height: '104px', backgroundColor: '#CFCFCF', justifyContent: 'center', placeItems: 'center', borderRadius: '10px'}}></div>
|
|
||||||
<div style={{width: '103px', height: '104px', backgroundColor: '#CFCFCF', justifyContent: 'center', placeItems: 'center', borderRadius: '10px'}}></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style={{display: 'flex', flexDirection: 'column', backgroundColor: '#FCFCFC', width: '40%', margin: 10,borderRadius: '10px'}}>
|
|
||||||
<h3 style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Tests</h3>
|
|
||||||
<div style={{display: 'flex', flexDirection: 'column', margin: 10, backgroundColor: '#FCFCFC'}}>
|
|
||||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Test - 1</p>
|
|
||||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Test - 2</p>
|
|
||||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Test - 3</p>
|
|
||||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Test - 4</p>
|
|
||||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Test - 5</p>
|
|
||||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Test - 7</p>
|
|
||||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Test - 8</p>
|
|
||||||
<p style={{borderBottom: '1px solid #CFCFCF'}}>Upcoming Test - 9</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Content>
|
|
||||||
</Layout>
|
|
||||||
</Layout>
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
|
|
@ -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<MenuProps>['items'][number];
|
||||||
|
|
||||||
|
|
||||||
|
const items2: MenuProps['items'] = [
|
||||||
|
{
|
||||||
|
key: 'sub1',
|
||||||
|
icon: <AdministrationIcon />,
|
||||||
|
label: 'Administration',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: '1',
|
||||||
|
label: (<a href='#'>Class Schedules</a>),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '2',
|
||||||
|
label: (<a href='#'>Classmate Directory</a>),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '3',
|
||||||
|
label: (<a href='#'>Qualifications</a>),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'sub2',
|
||||||
|
icon: <MyCoursesIcon />,
|
||||||
|
label: 'My Courses',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: '4',
|
||||||
|
label: (<a href='#'>Graduate Program</a>),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '5',
|
||||||
|
label: (<a href='#'>Post-Graduate Program</a>),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'sub3',
|
||||||
|
icon: <ExaminationIcon />,
|
||||||
|
label: 'Examinations',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: '6',
|
||||||
|
label: (<a href='#'>Exam Scheduled</a>),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '7',
|
||||||
|
label: (<a href='#'>Upcoming Exam</a>),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '8',
|
||||||
|
label: (<a href='#'>Passed Exam</a>),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'sub4',
|
||||||
|
icon: <CommunityIcon />,
|
||||||
|
label: 'Community',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: '9',
|
||||||
|
label: (<a href='#'>Exam Scheduled</a>),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '10',
|
||||||
|
label: (<a href='#'>Upcoming Exam</a>),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '11',
|
||||||
|
label: (<a href='#'>Passed Exam</a>),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'sub5',
|
||||||
|
icon: <NotificationIcon />,
|
||||||
|
label: 'Notifications',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: '12',
|
||||||
|
label: (<a href='#'>Exam Scheduled</a>),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '13',
|
||||||
|
label: (<a href='#'>Upcoming Exam</a>),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '14',
|
||||||
|
label: (<a href='#'>Passed Exam</a>),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
// getItem('Files', '9', <FileOutlined />),
|
||||||
|
{
|
||||||
|
key: 'grp',
|
||||||
|
label: '',
|
||||||
|
type: 'group',
|
||||||
|
style: { marginTop: '100px' },
|
||||||
|
children: [
|
||||||
|
{ key: '15', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, icon: React.createElement(SettingOutlined), label: (<h2 className='text-[18px] font-[700]'>Settings</h2>) },
|
||||||
|
{ key: '16', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, icon: React.createElement(QuestionCircleOutlined), label: (<h2 className='text-[18px] font-[700]'>Help & Support</h2>) },
|
||||||
|
{ key: '17', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, icon: React.createElement(LogoutOutlined), label: (<h2 className='text-[18px] font-[700]'>Logout</h2>) },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const items: MenuProps['items'] = [
|
||||||
|
{
|
||||||
|
label: <a href="https://www.antgroup.com">1st menu item</a>,
|
||||||
|
key: '0',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'divider',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: <a href="https://www.aliyun.com">2nd menu item</a>,
|
||||||
|
key: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'divider',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '3rd menu item',
|
||||||
|
key: '3',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const App: React.FC = () => {
|
||||||
|
const [open, setOpen] = React.useState<boolean>(false);
|
||||||
|
const [loading, setLoading] = React.useState<boolean>(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 (
|
||||||
|
|
||||||
|
<Layout>
|
||||||
|
<>
|
||||||
|
{/* <Button type="primary" onClick={showLoading}>Open Modal</Button> */}
|
||||||
|
<Modal style={{top: '20px', right: '0px'}} title={<p>Loading Modal</p>} footer={ <Button type="primary" onClick={showLoading}> Reload </Button>} loading={loading} open={open} onCancel={() => setOpen(false)} >
|
||||||
|
<p>Some contents...</p>
|
||||||
|
<p>Some contents...</p>
|
||||||
|
<p>Some contents...</p>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
{/* <Header style={{ display: 'flex', alignItems: 'center' }}>
|
||||||
|
<div className="demo-logo" />
|
||||||
|
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} style={{ flex: 1, minWidth: 0 }} />
|
||||||
|
</Header> */}
|
||||||
|
<Layout >
|
||||||
|
<Sider width={310} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0, background: colorBgContainer, borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
|
||||||
|
<div className='flex flex-col justify-center'>
|
||||||
|
<div className='px-4'>
|
||||||
|
<h1 className='text-[22px] font-[700] my-[37px] text-left'>IIMTT Logo</h1>
|
||||||
|
<a href="#" className='flex flex-row justify-between border-[1px] border-[#E9E9E9] rounded-[10px] p-2 place-items-center'>
|
||||||
|
<img className='w-[46px] h-[46px]' src="/assets/man.png" alt="" />
|
||||||
|
<div>
|
||||||
|
<p className='text-[16px] font-[500] text-[#6E6E6E]'>My Profile</p>
|
||||||
|
<p className='text-[22px] font-[700] '>Rayan Holiday</p>
|
||||||
|
</div>
|
||||||
|
<img className='' src="../../assets/right-arrow.svg" alt="" />
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
{/* <a href="#" style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', placeItems: 'center', border: '1px solid #CFCFCF', borderRadius: '10px', marginRight: 20, marginLeft: 20, width: '90%', background: '#FFF'}}>
|
||||||
|
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'center', placeItems: 'center', height: '80px'}}>
|
||||||
|
<img src="/assets/man.png" alt="" />
|
||||||
|
<div style={{}}>
|
||||||
|
<span style={{fontSize: '16px'}}>My Profile</span><br />
|
||||||
|
<span style={{fontSize: '22px'}}>Rayan Holiday</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="../../assets/right-arrow.svg" alt="" />
|
||||||
|
</a> */}
|
||||||
|
</div>
|
||||||
|
<Menu className='custom-menu' mode="inline" style={{ height: '100%', borderRight: 0, background: '#FCFCFC', paddingTop: 30, color: '#000'}} items={items2} />
|
||||||
|
</Sider>
|
||||||
|
{/* defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} */}
|
||||||
|
<Layout style={{marginLeft: 310,}}>
|
||||||
|
<Content style={{ background: colorBgContainer, overflow: 'initial',}}>
|
||||||
|
<div className='border-b-[1px] py-2'>
|
||||||
|
<div className='container mx-auto px-10 flex flex-row justify-between'>
|
||||||
|
<div className='inline-flex justify-center place-items-center'>
|
||||||
|
<img src="../../assets/student-dash.svg" alt=""/>
|
||||||
|
<p className='pl-1 text-[18px] font-[700] whitespace-nowrap'>Student Dashboard</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Button className='border-none shadow-none' onClick={showLoading}>
|
||||||
|
<div className='border-[1px] border[#525252] rounded-full p-2 w-[47px] h-[47px]'>
|
||||||
|
<svg viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M5.06445 20.2658V18.2111H7.1191V11.0198C7.1191 9.59872 7.54715 8.33597 8.40325 7.2316C9.25935 6.12723 10.3723 5.40382 11.742 5.06138V4.34225C11.742 3.9142 11.8919 3.55036 12.1915 3.25072C12.4911 2.95109 12.855 2.80127 13.283 2.80127C13.7111 2.80127 14.0749 2.95109 14.3746 3.25072C14.6742 3.55036 14.824 3.9142 14.824 4.34225V5.06138C16.1938 5.40382 17.3067 6.12723 18.1628 7.2316C19.0189 8.33597 19.447 9.59872 19.447 11.0198V18.2111H21.5016V20.2658H5.06445ZM13.283 23.3477C12.718 23.3477 12.2343 23.1465 11.8319 22.7442C11.4296 22.3418 11.2284 21.8581 11.2284 21.2931H15.3377C15.3377 21.8581 15.1365 22.3418 14.7341 22.7442C14.3318 23.1465 13.8481 23.3477 13.283 23.3477ZM9.17374 18.2111H17.3923V11.0198C17.3923 9.88979 16.99 8.9224 16.1852 8.11766C15.3805 7.31293 14.4131 6.91056 13.283 6.91056C12.153 6.91056 11.1856 7.31293 10.3808 8.11766C9.57611 8.9224 9.17374 9.88979 9.17374 11.0198V18.2111Z" fill="black"/>
|
||||||
|
<circle cx="19.4462" cy="19.2384" r="4.23771" fill="#FF0000" stroke="#fff" strokeWidth="2.31148"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
<Dropdown menu={{ items }} trigger={['click']}>
|
||||||
|
<a onClick={(e) => e.preventDefault()}>
|
||||||
|
<Space>
|
||||||
|
<div className='flex flex-row border-[1px] border-[#BBBBBB] rounded-full p-1 gap-x-6'>
|
||||||
|
<img src="/assets/man.png" alt="" />
|
||||||
|
<div>
|
||||||
|
<p className='text-[12px] text-[#EF7A0C] font-[500]'>My Profile</p>
|
||||||
|
<p className='text-[16px] text-[#27549F] font-[700]'>Rayan Holiday</p>
|
||||||
|
</div>
|
||||||
|
<DownOutlined style={{ fontSize: '12px' }} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</Space>
|
||||||
|
</a>
|
||||||
|
</Dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<section className=''>
|
||||||
|
<div className='container mx-auto px-10'>
|
||||||
|
<h2 className='text-[20px] font-[700] my-4 inline-flex leading-[24px]'>Course Content <img src="../../assets/right-arrow.svg" alt="" /></h2>
|
||||||
|
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
|
||||||
|
{courseData.map(data=>(
|
||||||
|
<div className=''>
|
||||||
|
<img className='w-full rounded-[10px]' src={data.img} alt="" />
|
||||||
|
<h2 className='text-[16px] font-[700] my-2'>{data.title}</h2>
|
||||||
|
<p className='text-[14px] font-[500] text-[#6E6E6E]'>
|
||||||
|
<span>Chapter {data.chapter}</span> •
|
||||||
|
<span>{data.Program}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section className='container mx-auto px-10 my-16'>
|
||||||
|
<div className='grid grid-cols-1 lg:grid-cols-3 gap-6'>
|
||||||
|
<div className='flex flex-col md:col-span-2 gap-6'>
|
||||||
|
<div className='flex flex-col xl:flex-row gap-6'>
|
||||||
|
<div className='border-[1px] border-[#E9E9E9] w-full bg-[#FCFCFC] rounded-[10px] '>
|
||||||
|
<div className='flex flex-row justify-between border-b-[1px] border-[#E9E9E9]'>
|
||||||
|
<h2 className='text-[20px] font-[700] p-4'>Attendance</h2>
|
||||||
|
<img src="../../assets/right-arrow.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<p className='text-center py-20'>Graph</p>
|
||||||
|
</div>
|
||||||
|
<div className='border-[1px] border-[#E9E9E9] w-full bg-[#FCFCFC] rounded-[10px]'>
|
||||||
|
<div className='flex flex-row justify-between border-b-[1px] border-[#E9E9E9]'>
|
||||||
|
<h2 className='text-[20px] font-[700] p-4'>Upcoming Classes</h2>
|
||||||
|
<img src="../../assets/right-arrow.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col space-y-16'>
|
||||||
|
<div className='border-b-[1px] border-[#CFCFCF]'></div>
|
||||||
|
<div className='border-b-[1px] border-[#CFCFCF]'></div>
|
||||||
|
<div className='border-b-[1px] border-[#CFCFCF]'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='border-[1px] border-[#E9E9E9] w-full bg-[#FCFCFC] rounded-[10px]'>
|
||||||
|
<h2 className='text-[20px] font-[700] p-4 border-b-[1px] border-[#E9E9E9]'>Accomplishments / Qualifications</h2>
|
||||||
|
<div className='flex flex-row justify-between p-6 overflow-x-auto'>
|
||||||
|
<img className='' src="../../assets/rectangle.jpg" alt="" />
|
||||||
|
<img className='' src="../../assets/rectangle.jpg" alt="" />
|
||||||
|
<img className='' src="../../assets/rectangle.jpg" alt="" />
|
||||||
|
<img className='' src="../../assets/rectangle.jpg" alt="" />
|
||||||
|
<img className='' src="../../assets/rectangle.jpg" alt="" />
|
||||||
|
<img className='' src="../../assets/rectangle.jpg" alt="" />
|
||||||
|
<img className='' src="../../assets/rectangle.jpg" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='md:col-span-1 border-[1px] border-[#E9E9E9] w-full bg-[#FCFCFC] rounded-[10px]'>
|
||||||
|
<h2 className='text-[20px] font-[700] p-4 border-b-[1px] border-[#E9E9E9]'>Upcoming Tests</h2>
|
||||||
|
<div className='flex flex-col'>
|
||||||
|
<div className='p-4 border-b-[1px] border-[#CFCFCF]'>
|
||||||
|
<img className='h-[44px] w-[79px]' src="../../assets/rectangle.jpg" alt="" />
|
||||||
|
</div>
|
||||||
|
<div className='p-4 border-b-[1px] border-[#CFCFCF]'>
|
||||||
|
<img className='h-[44px] w-[79px]' src="../../assets/rectangle.jpg" alt="" />
|
||||||
|
</div>
|
||||||
|
<div className='p-4 border-b-[1px] border-[#CFCFCF]'>
|
||||||
|
<img className='h-[44px] w-[79px]' src="../../assets/rectangle.jpg" alt="" />
|
||||||
|
</div>
|
||||||
|
<div className='p-4 border-b-[1px] border-[#CFCFCF]'>
|
||||||
|
<img className='h-[44px] w-[79px]' src="../../assets/rectangle.jpg" alt="" />
|
||||||
|
</div>
|
||||||
|
<div className='p-4 border-b-[1px] border-[#CFCFCF]'>
|
||||||
|
<img className='h-[44px] w-[79px]' src="../../assets/rectangle.jpg" alt="" />
|
||||||
|
</div>
|
||||||
|
<div className='p-4 border-b-[1px] border-[#CFCFCF]'>
|
||||||
|
<img className='h-[44px] w-[79px]' src="../../assets/rectangle.jpg" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</Content>
|
||||||
|
</Layout>
|
||||||
|
</Layout>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
// app/components/AdministrationIcon.jsx
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const AdministrationIcon = () => (
|
||||||
|
<svg
|
||||||
|
width="25"
|
||||||
|
height="25"
|
||||||
|
viewBox="0 0 25 25"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12.3984 13.9597C11.4151 13.9597 10.5859 13.6222 9.91094 12.9472C9.23594 12.2722 8.89844 11.4431 8.89844 10.4597C8.89844 9.47638 9.23594 8.64722 9.91094 7.97222C10.5859 7.29722 11.4151 6.95972 12.3984 6.95972C13.3818 6.95972 14.2109 7.29722 14.8859 7.97222C15.5609 8.64722 15.8984 9.47638 15.8984 10.4597C15.8984 11.4431 15.5609 12.2722 14.8859 12.9472C14.2109 13.6222 13.3818 13.9597 12.3984 13.9597ZM12.3984 11.9597C12.8318 11.9597 13.1901 11.8181 13.4734 11.5347C13.7568 11.2514 13.8984 10.8931 13.8984 10.4597C13.8984 10.0264 13.7568 9.66805 13.4734 9.38472C13.1901 9.10138 12.8318 8.95972 12.3984 8.95972C11.9651 8.95972 11.6068 9.10138 11.3234 9.38472C11.0401 9.66805 10.8984 10.0264 10.8984 10.4597C10.8984 10.8931 11.0401 11.2514 11.3234 11.5347C11.6068 11.8181 11.9651 11.9597 12.3984 11.9597ZM12.3984 22.9597C10.0818 22.3764 8.16927 21.0472 6.66094 18.9722C5.1526 16.8972 4.39844 14.5931 4.39844 12.0597V5.95972L12.3984 2.95972L20.3984 5.95972V12.0597C20.3984 14.5931 19.6443 16.8972 18.1359 18.9722C16.6276 21.0472 14.7151 22.3764 12.3984 22.9597ZM12.3984 5.08472L6.39844 7.33472V12.0597C6.39844 12.9597 6.52344 13.8347 6.77344 14.6847C7.02344 15.5347 7.3651 16.3347 7.79844 17.0847C8.49844 16.7347 9.23177 16.4597 9.99844 16.2597C10.7651 16.0597 11.5651 15.9597 12.3984 15.9597C13.2318 15.9597 14.0318 16.0597 14.7984 16.2597C15.5651 16.4597 16.2984 16.7347 16.9984 17.0847C17.4318 16.3347 17.7734 15.5347 18.0234 14.6847C18.2734 13.8347 18.3984 12.9597 18.3984 12.0597V7.33472L12.3984 5.08472ZM12.3984 17.9597C11.7984 17.9597 11.2151 18.0264 10.6484 18.1597C10.0818 18.2931 9.5401 18.4764 9.02344 18.7097C9.50677 19.2097 10.0318 19.6431 10.5984 20.0097C11.1651 20.3764 11.7651 20.6597 12.3984 20.8597C13.0318 20.6597 13.6318 20.3764 14.1984 20.0097C14.7651 19.6431 15.2901 19.2097 15.7734 18.7097C15.2568 18.4764 14.7151 18.2931 14.1484 18.1597C13.5818 18.0264 12.9984 17.9597 12.3984 17.9597Z"
|
||||||
|
fill="var(--icon-color)"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default AdministrationIcon;
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
// app/components/CommunityIcon.jsx
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const CommunityIcon = () => (
|
||||||
|
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M7.39844 18.9597C7.1151 18.9597 6.8776 18.8639 6.68594 18.6722C6.49427 18.4806 6.39844 18.2431 6.39844 17.9597V15.9597H19.3984V6.95972H21.3984C21.6818 6.95972 21.9193 7.05555 22.1109 7.24722C22.3026 7.43888 22.3984 7.67638 22.3984 7.95972V22.9597L18.3984 18.9597H7.39844ZM2.39844 17.9597V3.95972C2.39844 3.67638 2.49427 3.43888 2.68594 3.24722C2.8776 3.05555 3.1151 2.95972 3.39844 2.95972H16.3984C16.6818 2.95972 16.9193 3.05555 17.1109 3.24722C17.3026 3.43888 17.3984 3.67638 17.3984 3.95972V12.9597C17.3984 13.2431 17.3026 13.4806 17.1109 13.6722C16.9193 13.8639 16.6818 13.9597 16.3984 13.9597H6.39844L2.39844 17.9597ZM15.3984 11.9597V4.95972H4.39844V11.9597H15.3984Z"
|
||||||
|
fill="var(--icon-color)"/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default CommunityIcon;
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
// app/components/ExaminationIcon.jsx
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const ExaminationIcon = () => (
|
||||||
|
<svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M0.398438 10.9597V8.95972H7.39844V10.9597H0.398438ZM0.398438 6.95972V4.95972H11.3984V6.95972H0.398438ZM0.398438 2.95972V0.959717H11.3984V2.95972H0.398438ZM9.39844 16.9597V13.8847L14.9234 8.38472C15.0734 8.23472 15.2401 8.12638 15.4234 8.05972C15.6068 7.99305 15.7901 7.95972 15.9734 7.95972C16.1734 7.95972 16.3651 7.99722 16.5484 8.07222C16.7318 8.14722 16.8984 8.25972 17.0484 8.40972L17.9734 9.33472C18.1068 9.48472 18.2109 9.65138 18.2859 9.83472C18.3609 10.0181 18.3984 10.2014 18.3984 10.3847C18.3984 10.5681 18.3651 10.7556 18.2984 10.9472C18.2318 11.1389 18.1234 11.3097 17.9734 11.4597L12.4734 16.9597H9.39844ZM10.8984 15.4597H11.8484L14.8734 12.4097L14.4234 11.9347L13.9484 11.4847L10.8984 14.5097V15.4597ZM14.4234 11.9347L13.9484 11.4847L14.8734 12.4097L14.4234 11.9347Z"
|
||||||
|
fill="var(--icon-color)"/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default ExaminationIcon;
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
// app/components/MyCoursesIcon.jsx
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const MyCoursesIcon = () => (
|
||||||
|
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M10.3984 14.9597H14.3984V12.9597H10.3984V14.9597ZM10.3984 11.9597H18.3984V9.95972H10.3984V11.9597ZM10.3984 8.95972H18.3984V6.95972H10.3984V8.95972ZM8.39844 18.9597C7.84844 18.9597 7.3776 18.7639 6.98594 18.3722C6.59427 17.9806 6.39844 17.5097 6.39844 16.9597V4.95972C6.39844 4.40972 6.59427 3.93888 6.98594 3.54722C7.3776 3.15555 7.84844 2.95972 8.39844 2.95972H20.3984C20.9484 2.95972 21.4193 3.15555 21.8109 3.54722C22.2026 3.93888 22.3984 4.40972 22.3984 4.95972V16.9597C22.3984 17.5097 22.2026 17.9806 21.8109 18.3722C21.4193 18.7639 20.9484 18.9597 20.3984 18.9597H8.39844ZM8.39844 16.9597H20.3984V4.95972H8.39844V16.9597ZM4.39844 22.9597C3.84844 22.9597 3.3776 22.7639 2.98594 22.3722C2.59427 21.9806 2.39844 21.5097 2.39844 20.9597V6.95972H4.39844V20.9597H18.3984V22.9597H4.39844Z"
|
||||||
|
fill="var(--icon-color)"/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default MyCoursesIcon;
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
// app/components/NotificationIcon.jsx
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const NotificationIcon = () => (
|
||||||
|
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M4.39844 19.9597V17.9597H6.39844V10.9597C6.39844 9.57638 6.8151 8.34722 7.64844 7.27222C8.48177 6.19722 9.5651 5.49305 10.8984 5.15972V4.45972C10.8984 4.04305 11.0443 3.68888 11.3359 3.39722C11.6276 3.10555 11.9818 2.95972 12.3984 2.95972C12.8151 2.95972 13.1693 3.10555 13.4609 3.39722C13.7526 3.68888 13.8984 4.04305 13.8984 4.45972V5.15972C15.2318 5.49305 16.3151 6.19722 17.1484 7.27222C17.9818 8.34722 18.3984 9.57638 18.3984 10.9597V17.9597H20.3984V19.9597H4.39844ZM12.3984 22.9597C11.8484 22.9597 11.3776 22.7639 10.9859 22.3722C10.5943 21.9806 10.3984 21.5097 10.3984 20.9597H14.3984C14.3984 21.5097 14.2026 21.9806 13.8109 22.3722C13.4193 22.7639 12.9484 22.9597 12.3984 22.9597ZM8.39844 17.9597H16.3984V10.9597C16.3984 9.85972 16.0068 8.91805 15.2234 8.13472C14.4401 7.35138 13.4984 6.95972 12.3984 6.95972C11.2984 6.95972 10.3568 7.35138 9.57344 8.13472C8.7901 8.91805 8.39844 9.85972 8.39844 10.9597V17.9597Z"
|
||||||
|
fill="var(--icon-color)"/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default NotificationIcon;
|
||||||
|
|
@ -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 (
|
||||||
|
<div>
|
||||||
<TestComponent />
|
<TestComponent />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import type { MetaFunction } from "@remix-run/node";
|
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() {
|
export default function Index() {
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
|
|
@ -1,5 +1,5 @@
|
||||||
|
|
||||||
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M5.06445 20.2658V18.2111H7.1191V11.0198C7.1191 9.59872 7.54715 8.33597 8.40325 7.2316C9.25935 6.12723 10.3723 5.40382 11.742 5.06138V4.34225C11.742 3.9142 11.8919 3.55036 12.1915 3.25072C12.4911 2.95109 12.855 2.80127 13.283 2.80127C13.7111 2.80127 14.0749 2.95109 14.3746 3.25072C14.6742 3.55036 14.824 3.9142 14.824 4.34225V5.06138C16.1938 5.40382 17.3067 6.12723 18.1628 7.2316C19.0189 8.33597 19.447 9.59872 19.447 11.0198V18.2111H21.5016V20.2658H5.06445ZM13.283 23.3477C12.718 23.3477 12.2343 23.1465 11.8319 22.7442C11.4296 22.3418 11.2284 21.8581 11.2284 21.2931H15.3377C15.3377 21.8581 15.1365 22.3418 14.7341 22.7442C14.3318 23.1465 13.8481 23.3477 13.283 23.3477ZM9.17374 18.2111H17.3923V11.0198C17.3923 9.88979 16.99 8.9224 16.1852 8.11766C15.3805 7.31293 14.4131 6.91056 13.283 6.91056C12.153 6.91056 11.1856 7.31293 10.3808 8.11766C9.57611 8.9224 9.17374 9.88979 9.17374 11.0198V18.2111Z" fill="black"/>
|
<path d="M5.06445 20.2658V18.2111H7.1191V11.0198C7.1191 9.59872 7.54715 8.33597 8.40325 7.2316C9.25935 6.12723 10.3723 5.40382 11.742 5.06138V4.34225C11.742 3.9142 11.8919 3.55036 12.1915 3.25072C12.4911 2.95109 12.855 2.80127 13.283 2.80127C13.7111 2.80127 14.0749 2.95109 14.3746 3.25072C14.6742 3.55036 14.824 3.9142 14.824 4.34225V5.06138C16.1938 5.40382 17.3067 6.12723 18.1628 7.2316C19.0189 8.33597 19.447 9.59872 19.447 11.0198V18.2111H21.5016V20.2658H5.06445ZM13.283 23.3477C12.718 23.3477 12.2343 23.1465 11.8319 22.7442C11.4296 22.3418 11.2284 21.8581 11.2284 21.2931H15.3377C15.3377 21.8581 15.1365 22.3418 14.7341 22.7442C14.3318 23.1465 13.8481 23.3477 13.283 23.3477ZM9.17374 18.2111H17.3923V11.0198C17.3923 9.88979 16.99 8.9224 16.1852 8.11766C15.3805 7.31293 14.4131 6.91056 13.283 6.91056C12.153 6.91056 11.1856 7.31293 10.3808 8.11766C9.57611 8.9224 9.17374 9.88979 9.17374 11.0198V18.2111Z" fill="black"/>
|
||||||
<circle cx="19.4462" cy="19.2384" r="4.23771" fill="black" stroke="#ff0000" stroke-width="2.31148"/>
|
<circle cx="19.4462" cy="19.2384" r="4.23771" fill="black" stroke="#ff0000" strokeWidth="2.31148"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,4 @@
|
||||||
|
|
||||||
|
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12.9984 12.9597L8.39844 8.35972L9.79844 6.95972L15.7984 12.9597L9.79844 18.9597L8.39844 17.5597L12.9984 12.9597Z" fill="black"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 243 B |
|
|
@ -1,25 +1,22 @@
|
||||||
|
|
||||||
.ant-menu-item-selected {
|
|
||||||
/* background-color: #ED9545 !important; */
|
.ant-menu-light .ant-menu-item-selected{
|
||||||
border-left: 1px solid #CFCFCF ;
|
color: #ED9545;
|
||||||
|
border-left: 3px solid #ED9545 ;
|
||||||
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* App.css */
|
/* App.css */
|
||||||
.custom-menu .ant-menu-item {
|
.custom-menu .ant-menu-item {
|
||||||
border-bottom: 1px solid #CFCFCF; /* Default border color */
|
|
||||||
border-radius: 0; /* Remove border-radius */
|
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) */
|
/* Specific styling for parent menu items (non-selected) */
|
||||||
.custom-menu .ant-menu-submenu-title {
|
.custom-menu .ant-menu-submenu-title {
|
||||||
border-bottom: 1px solid #CFCFCF; /* Default border color for parent items */
|
border-bottom: 1px solid #CFCFCF; /* Default border color for parent items */
|
||||||
border-radius: 0; /* Remove border-radius for parent items */
|
border-radius: 0; /* Remove border-radius for parent items */
|
||||||
font-size: 20px;
|
font-size: 18px;
|
||||||
color: #000;
|
color: #000;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
padding-top: 40px;
|
padding-top: 40px;
|
||||||
|
|
@ -36,10 +33,7 @@
|
||||||
--icon-color: #ED9545; /* Selected icon color */
|
--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 */
|
/* Ensure parent item remains #ED9545 when any child is selected */
|
||||||
.custom-menu .ant-menu-submenu-open > .ant-menu-submenu-title {
|
.custom-menu .ant-menu-submenu-open > .ant-menu-submenu-title {
|
||||||
|
|
@ -53,3 +47,25 @@
|
||||||
color: #000; /* Ensure parent item text color */
|
color: #000; /* Ensure parent item text color */
|
||||||
--icon-color: #000; /* Ensure parent item icon 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 */
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
|
||||||
|
<svg width="24" height="24" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M6.89844 18.4597L14.3984 14.9597L17.8984 7.45972L10.3984 10.9597L6.89844 18.4597ZM12.3984 13.9597C12.1151 13.9597 11.8776 13.8639 11.6859 13.6722C11.4943 13.4806 11.3984 13.2431 11.3984 12.9597C11.3984 12.6764 11.4943 12.4389 11.6859 12.2472C11.8776 12.0556 12.1151 11.9597 12.3984 11.9597C12.6818 11.9597 12.9193 12.0556 13.1109 12.2472C13.3026 12.4389 13.3984 12.6764 13.3984 12.9597C13.3984 13.2431 13.3026 13.4806 13.1109 13.6722C12.9193 13.8639 12.6818 13.9597 12.3984 13.9597ZM12.3984 22.9597C11.0151 22.9597 9.7151 22.6972 8.49844 22.1722C7.28177 21.6472 6.22344 20.9347 5.32344 20.0347C4.42344 19.1347 3.71094 18.0764 3.18594 16.8597C2.66094 15.6431 2.39844 14.3431 2.39844 12.9597C2.39844 11.5764 2.66094 10.2764 3.18594 9.05972C3.71094 7.84305 4.42344 6.78472 5.32344 5.88472C6.22344 4.98472 7.28177 4.27222 8.49844 3.74722C9.7151 3.22222 11.0151 2.95972 12.3984 2.95972C13.7818 2.95972 15.0818 3.22222 16.2984 3.74722C17.5151 4.27222 18.5734 4.98472 19.4734 5.88472C20.3734 6.78472 21.0859 7.84305 21.6109 9.05972C22.1359 10.2764 22.3984 11.5764 22.3984 12.9597C22.3984 14.3431 22.1359 15.6431 21.6109 16.8597C21.0859 18.0764 20.3734 19.1347 19.4734 20.0347C18.5734 20.9347 17.5151 21.6472 16.2984 22.1722C15.0818 22.6972 13.7818 22.9597 12.3984 22.9597ZM12.3984 20.9597C14.6318 20.9597 16.5234 20.1847 18.0734 18.6347C19.6234 17.0847 20.3984 15.1931 20.3984 12.9597C20.3984 10.7264 19.6234 8.83472 18.0734 7.28472C16.5234 5.73472 14.6318 4.95972 12.3984 4.95972C10.1651 4.95972 8.27344 5.73472 6.72344 7.28472C5.17344 8.83472 4.39844 10.7264 4.39844 12.9597C4.39844 15.1931 5.17344 17.0847 6.72344 18.6347C8.27344 20.1847 10.1651 20.9597 12.3984 20.9597Z" fill="black"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -1575,7 +1575,7 @@ ansi-styles@^6.1.0:
|
||||||
|
|
||||||
antd@^5.19.3:
|
antd@^5.19.3:
|
||||||
version "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==
|
integrity sha512-rhGI6yyZ4dA2MWl9bfO0MZjtNwWdzITpp3u7pKLiQpTjJYFlpF5wDFgGaG1or3sqyBihvqcO/OF1hSggmWczbQ==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@ant-design/colors" "^7.1.0"
|
"@ant-design/colors" "^7.1.0"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue