generated from dwd/boilarplate-remix-tailwind-antd
108 lines
4.6 KiB
TypeScript
108 lines
4.6 KiB
TypeScript
import React, {useState} from 'react';
|
|
import { RightOutlined} from '@ant-design/icons';
|
|
import AlbumsLanguageMaths from '~/components/AlbumsLanguage&Maths';
|
|
import {Layout, theme, Button, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
|
|
import '../../public/assets/left_side_nav.css';
|
|
import LeftSideMenu from '~/components/LeftSideMenuItems';
|
|
|
|
const { Content, Sider } = Layout;
|
|
|
|
const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
|
|
key,
|
|
label: `navsd ${key}`,
|
|
}));
|
|
|
|
type MenuItem = Required<MenuProps>['items'][number];
|
|
|
|
|
|
|
|
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>
|
|
<LeftSideMenu />
|
|
</Sider>
|
|
</div>
|
|
<Layout style={{marginLeft: collapsed ? 80 : 366, background: '#FFF', transition: 'margin-left 0.2s ease'}}>
|
|
<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'>
|
|
<Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="/mycourse">Course</a>,},{title: <a href="/mycourse/albums">Albums</a>,}, {title: 'Language & Maths'}]}/>
|
|
</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 */}
|
|
<AlbumsLanguageMaths />
|
|
</Content>
|
|
</Layout>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
};
|
|
export default App;
|
|
|