import React, { useState } from "react"; import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined } from '@ant-design/icons'; import { Layout, Menu, theme, Button, Modal, MenuProps } from 'antd'; import { Dropdown, Space } from 'antd'; import '../../public/assets/left_side_nav.css'; import '../../public/assets/knowledge-quest.css'; const { Content, Sider } = Layout; const items: MenuProps['items'] = [ { label: 1st menu item, key: '01sd', }, { type: 'divider', }, { label: 2nd menu item, key: '02sd', }, { type: 'divider', }, { label: '3rd menu item', key: '03sd', }, ]; const App: React.FC = () => { const [collapsed, setCollapsed] = useState(false); 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...

Student Dashboard

) } export default App;