generated from dwd/boilarplate-remix-tailwind-antd
361 lines
20 KiB
TypeScript
361 lines
20 KiB
TypeScript
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;
|