s1

2024-08-07 21:55:33 +05:30
parent 2512a918fb
commit ec099bf3ab
26 changed files with 812 additions and 12 deletions
--- a/app/routes/theory.mod1.tsx
+++ b/app/routes/theory.mod1.tsx
@@ -0,0 +1,113 @@
+import React, {useState} from 'react';
+import { RightOutlined} from '@ant-design/icons';
+
+import StartCourse from '~/components/MyCourseTheoryModule';
+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 Course: 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/theory">Theory</a>,},{title: 'Module 1 : Life History of Dr. Maria Montessori'}]}/> 
+                            </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>
+                    <div className=''>
+                        <StartCourse />
+                    </div>
+                    {/* Place Content from here */}
+                    
+
+                </Content>
+            </Layout>
+        </Layout>
+    </Layout>
+  );
+};
+export default Course;
+