generated from dwd/boilarplate-remix-tailwind-antd
s1
This commit is contained in:
Suvodip
251
app/routes/progress-review.tsx
Normal file
251
app/routes/progress-review.tsx
Normal file
@@ -0,0 +1,251 @@
|
||||
import React, {useState} from 'react';
|
||||
import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} from '@ant-design/icons';
|
||||
import AdministrationIcon from '~/components/customIcon/AdministrationIcon';
|
||||
import MyCoursesIcon from '~/components/customIcon/MyCoursesIcon';
|
||||
import ExaminationIcon from '~/components/customIcon/ExaminationIcon';
|
||||
import CommunityIcon from '~/components/customIcon/CommunityIcon';
|
||||
import NotificationIcon from '~/components/customIcon/NotificationIcon';
|
||||
import {Layout, Menu, theme, Button, Modal, MenuProps} from 'antd';
|
||||
import ProgressReviewTopSection from '~/components/ProgressReviewTopSection';
|
||||
import ProgressReview from '~/components/ProgressReview';
|
||||
import QuizzesScore from '~/components/QuizzesScore'
|
||||
import YourCertificates from '~/components/YourCertificates'
|
||||
import { Dropdown, Space } from 'antd';
|
||||
import '../../public/assets/left_side_nav.css';
|
||||
|
||||
|
||||
const { Content, Sider } = Layout;
|
||||
|
||||
const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
|
||||
key,
|
||||
label: `navsd ${key}`,
|
||||
}));
|
||||
|
||||
type MenuItem = Required<MenuProps>['items'][number];
|
||||
|
||||
|
||||
const items2: MenuProps['items'] = [
|
||||
{
|
||||
key: 'subsd1',
|
||||
icon: <AdministrationIcon />,
|
||||
label: (<p> Administration</p>),
|
||||
children: [
|
||||
{
|
||||
key: '1sd',
|
||||
label: (<a href='#'>Class Schedules</a>),
|
||||
},
|
||||
{
|
||||
key: '2sd',
|
||||
label: (<a href='#'>Classmate Directory</a>),
|
||||
},
|
||||
{
|
||||
key: '3sd',
|
||||
label: (<a href='#'>Qualifications</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'subsd2',
|
||||
icon: <MyCoursesIcon />,
|
||||
label: (<p> My Courses</p>),
|
||||
children: [
|
||||
{
|
||||
key: '4sd',
|
||||
label: (<a href='#'>Graduate Program</a>),
|
||||
},
|
||||
{
|
||||
key: '5sd',
|
||||
label: (<a href='#'>Post-Graduate Program</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'subsd3',
|
||||
icon: <ExaminationIcon />,
|
||||
label: (<p> Examinations</p>),
|
||||
children: [
|
||||
{
|
||||
key: '6sd',
|
||||
label: (<a href='#'>Exam Scheduled</a>),
|
||||
},
|
||||
{
|
||||
key: '7sd',
|
||||
label: (<a href='#'>Upcoming Exam</a>),
|
||||
},
|
||||
{
|
||||
key: '8sd',
|
||||
label: (<a href='#'>Passed Exam</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'subsd4',
|
||||
icon: <CommunityIcon />,
|
||||
label: (<p> Community</p>),
|
||||
children: [
|
||||
{
|
||||
key: '9sd',
|
||||
label: (<a href='#'>Exam Scheduled</a>),
|
||||
},
|
||||
{
|
||||
key: '10sd',
|
||||
label: (<a href='#'>Upcoming Exam</a>),
|
||||
},
|
||||
{
|
||||
key: '11sd',
|
||||
label: (<a href='#'>Passed Exam</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'subsd5',
|
||||
icon: <NotificationIcon />,
|
||||
label: (<p> Notifications</p>),
|
||||
children: [
|
||||
{
|
||||
key: '12sd',
|
||||
label: (<a href='#'>Exam Scheduled</a>),
|
||||
},
|
||||
{
|
||||
key: '13sd',
|
||||
label: (<a href='#'>Upcoming Exam</a>),
|
||||
},
|
||||
{
|
||||
key: '14sd',
|
||||
label: (<a href='#'>Passed Exam</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
// getItem('Files', '9', <FileOutlined />),
|
||||
{
|
||||
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: (<h2 className='text-[18px] font-[700] text-[#000]'>Settings</h2>)
|
||||
},
|
||||
{
|
||||
key: '16sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
|
||||
icon: React.createElement(QuestionCircleOutlined, { style: { color: '#000' } }),
|
||||
label: (<h2 className='text-[18px] font-[700] text-[#000]'>Help & Support</h2>)
|
||||
},
|
||||
{
|
||||
key: '17sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
|
||||
icon: React.createElement(LogoutOutlined, { style: { color: '#000' } }),
|
||||
label: (<h2 className='text-[18px] font-[700] text-[#000]'>Logout</h2>)
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
label: <a href="https://www.antgroup.com">1st menu item</a>,
|
||||
key: '01sd',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
label: <a href="https://www.aliyun.com">2nd menu item</a>,
|
||||
key: '02sd',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
label: '3rd menu item',
|
||||
key: '03sd',
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
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>
|
||||
<Layout>
|
||||
<div >
|
||||
<Sider collapsible collapsed={collapsed} onCollapse={(value) => 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'}}>
|
||||
<div className='flex flex-col justify-center demo-logo-vertical'>
|
||||
<div className='px-4'>
|
||||
<h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>
|
||||
</div>
|
||||
</div>
|
||||
<Menu className='custom-menu' mode="inline" style={{ height: '100%', borderRight: 0, paddingTop: 30, background: 'transparent'}} items={items2} />
|
||||
</Sider>
|
||||
</div>
|
||||
<Layout style={{marginLeft: 366, background: '#FFF'}}>
|
||||
<Content style={{ overflow: 'initial',}}>
|
||||
<div className='border-b-[1px] py-2 border-[#CFCFCF]'>
|
||||
<div className='container mx-auto flex flex-row justify-between pr-8'>
|
||||
<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 bg-transparent hover:bg-transparent' onClick={showLoading}>
|
||||
<div className='border-[1px] border[#525252] rounded-full p-2 w-[47px] h-[47px]'>
|
||||
<img src="../../assets/notification-bell.svg" alt="" />
|
||||
</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>
|
||||
<RightOutlined style={{ fontSize: '12px', paddingRight: '10px' }} />
|
||||
</div>
|
||||
</Space>
|
||||
</a>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Place Content from here */}
|
||||
<div>
|
||||
<ProgressReviewTopSection />
|
||||
</div>
|
||||
<div className='grid grid-cols-1 xl:grid-cols-7 border-t-[1px] border-t-[#CFCFCF]'>
|
||||
<div className='xl:col-span-5 border-r-[1px] border-r-[#CFCFCF]'>
|
||||
<ProgressReview />
|
||||
</div>
|
||||
<div className="xl:col-span-2 p-4">
|
||||
<QuizzesScore />
|
||||
|
||||
<YourCertificates />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
export default App;
|
||||
Reference in New Issue
Block a user