s1

2024-07-26 14:08:00 +05:30
parent 59c6326cf0
commit e155a1b997
11 changed files with 1254 additions and 331 deletions
--- a/app/routes/test2.tsx
+++ b/app/routes/test2.tsx
@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, DownOutlined} from '@ant-design/icons';
+import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} from '@ant-design/icons';
 import Icon from '@ant-design/icons';

 import AdministrationIcon from '~/components/customIcon/AdministrationIcon';
@@ -38,87 +38,366 @@ let courseData = [
 ];
 let knowledgeData = [
    {
-      id: "1",
-      status: "1",
-      title: "Assessment on Special Education",
-      challenge: "Challenge yourself & climb the leaderboard.",
-      question: "Subjective Question",
-      img: "../../assets/knowledge1.jpg"
+        id: "1",
+        status: "1",
+        title: "Assessment on Special Education",
+        challenge: "Challenge yourself & climb the leaderboard.",
+        question: "Subjective Question",
+        img: "../../assets/knowledge1.jpg"
    },
    {
-      id: "2",
-      status: "1",
-      title: "Quiz on Children Psychology",
-      challenge: "Challenge yourself & climb the leaderboard.",
-      question: "MCQ",
-      img: "../../assets/knowledge2.jpg"
+        id: "2",
+        status: "1",
+        title: "Quiz on Children Psychology",
+        challenge: "Challenge yourself & climb the leaderboard.",
+        question: "MCQ",
+        img: "../../assets/knowledge2.jpg"
    },
    {
-      id: "3",
-      status: "1",
-      title: "Quiz on Montessori Methods",
-      challenge: "Challenge yourself & climb the leaderboard.",
-      question: "MCQ",
-      img: "../../assets/knowledge3.jpg"
+        id: "3",
+        status: "1",
+        title: "Quiz on Montessori Methods",
+        challenge: "Challenge yourself & climb the leaderboard.",
+        question: "MCQ",
+        img: "../../assets/knowledge3.jpg"
+    },
+    {
+        id: "4",
+        status: "1",
+        title: "Assessment on Special Education",
+        challenge: "Challenge yourself & climb the leaderboard.",
+        question: "Subjective Question",
+        img: "../../assets/knowledge1.jpg"
+    },
+    {
+        id: "5",
+        status: "1",
+        title: "Quiz on Children Psychology",
+        challenge: "Challenge yourself & climb the leaderboard.",
+        question: "MCQ",
+        img: "../../assets/knowledge2.jpg"
+    },
+    {
+        id: "6",
+        status: "1",
+        title: "Quiz on Montessori Methods",
+        challenge: "Challenge yourself & climb the leaderboard.",
+        question: "MCQ",
+        img: "../../assets/knowledge3.jpg"
+    },
+    {
+        id: "7",
+        status: "1",
+        title: "Workshop on Child Development",
+        challenge: "Expand your knowledge & earn badges.",
+        question: "Interactive Session",
+        img: "../../assets/knowledge1.jpg"
+    },
+    {
+        id: "8",
+        status: "1",
+        title: "Webinar on Educational Psychology",
+        challenge: "Join & enhance your skills.",
+        question: "Discussion",
+        img: "../../assets/knowledge2.jpg"
+    },
+    {
+        id: "9",
+        status: "1",
+        title: "Seminar on Inclusive Education",
+        challenge: "Participate & gain insights.",
+        question: "Lecture",
+        img: "../../assets/knowledge3.jpg"
+    },
+    {
+        id: "10",
+        status: "1",
+        title: "Course on Early Childhood Education",
+        challenge: "Complete the course & get certified.",
+        question: "Multiple Modules",
+        img: "../../assets/knowledge1.jpg"
+    },
+    {
+        id: "11",
+        status: "1",
+        title: "Training on Classroom Management",
+        challenge: "Improve your teaching strategies.",
+        question: "Practical Tasks",
+        img: "../../assets/knowledge2.jpg"
+    },
+    {
+        id: "12",
+        status: "1",
+        title: "Lecture on Cognitive Development",
+        challenge: "Expand your understanding & get certified.",
+        question: "Q&A Session",
+        img: "../../assets/knowledge3.jpg"
+    },
+    {
+        id: "13",
+        status: "1",
+        title: "Workshop on Behavioral Issues",
+        challenge: "Join & learn from experts.",
+        question: "Interactive Session",
+        img: "../../assets/knowledge1.jpg"
+    },
+    {
+        id: "14",
+        status: "1",
+        title: "Seminar on Learning Disabilities",
+        challenge: "Participate & enhance your knowledge.",
+        question: "Lecture",
+        img: "../../assets/knowledge2.jpg"
+    },
+    {
+        id: "15",
+        status: "1",
+        title: "Webinar on Child Psychology",
+        challenge: "Join & expand your skills.",
+        question: "Discussion",
+        img: "../../assets/knowledge3.jpg"
+    },
+    {
+        id: "16",
+        status: "1",
+        title: "Course on Special Education Needs",
+        challenge: "Complete the course & get certified.",
+        question: "Multiple Modules",
+        img: "../../assets/knowledge1.jpg"
+    },
+    {
+        id: "17",
+        status: "1",
+        title: "Training on Autism Spectrum Disorder",
+        challenge: "Improve your teaching strategies.",
+        question: "Practical Tasks",
+        img: "../../assets/knowledge2.jpg"
+    },
+    {
+        id: "18",
+        status: "1",
+        title: "Lecture on Emotional Development",
+        challenge: "Expand your understanding & get certified.",
+        question: "Q&A Session",
+        img: "../../assets/knowledge3.jpg"
+    },
+    {
+        id: "19",
+        status: "1",
+        title: "Workshop on ADHD",
+        challenge: "Join & learn from experts.",
+        question: "Interactive Session",
+        img: "../../assets/knowledge1.jpg"
+    },
+    {
+        id: "20",
+        status: "1",
+        title: "Seminar on Speech and Language Disorders",
+        challenge: "Participate & enhance your knowledge.",
+        question: "Lecture",
+        img: "../../assets/knowledge2.jpg"
+    },
+    {
+        id: "21",
+        status: "1",
+        title: "Webinar on Child Nutrition",
+        challenge: "Join & expand your skills.",
+        question: "Discussion",
+        img: "../../assets/knowledge3.jpg"
    }
 ];

 let performersData = [
    {
-      id: "1",
-      name: "Eiden",
-      score: "48/50",
-      points: "999",
-      rank: "1",
-      program: "Graduate Program",
-      avatar: "../../assets/avatar1.png"
+        id: "1",
+        name: "Eiden",
+        score: "48/50",
+        points: "999",
+        rank: "1",
+        program: "Graduate Program",
+        avatar: "avatar1.png"
    },
    {
-      id: "2",
-      name: "Jackson",
-      score: "45/50",
-      points: "997",
-      rank: "2",
-      program: "Graduate Program",
-      avatar: "../../assets/avatar2.png"
+        id: "2",
+        name: "Jackson",
+        score: "45/50",
+        points: "997",
+        rank: "2",
+        program: "Graduate Program",
+        avatar: "avatar2.png"
    },
    {
-      id: "3",
-      name: "Emma Aria",
-      score: "43/50",
-      points: "994",
-      rank: "3",
-      program: "Graduate Program",
-      avatar: "../../assets/avatar3.png"
+        id: "3",
+        name: "Emma Aria",
+        score: "43/50",
+        points: "994",
+        rank: "3",
+        program: "Graduate Program",
+        avatar: "avatar3.png"
    },
    {
-      id: "4",
-      name: "John Doe",
-      score: "40/50",
-      points: "990",
-      rank: "4",
-      program: "Graduate Program",
-      avatar: "../../assets/avatar4.png"
+        id: "4",
+        name: "John Doe",
+        score: "40/50",
+        points: "990",
+        rank: "4",
+        program: "Graduate Program",
+        avatar: "avatar4.png"
    },
    {
-      id: "5",
-      name: "Jane Cooper",
-      score: "37/50",
-      points: "987",
-      rank: "5",
-      program: "Graduate Program",
-      avatar: "../../assets/avatar5.png"
+        id: "5",
+        name: "Jane Cooper",
+        score: "37/50",
+        points: "987",
+        rank: "5",
+        program: "Graduate Program",
+        avatar: "avatar5.png"
    },
    {
-      id: "6",
-      name: "John Doe",
-      score: "35/50",
-      points: "982",
-      rank: "6",
-      program: "Graduate Program",
-      avatar: "../../assets/avatar6.png"
+        id: "6",
+        name: "John Doe",
+        score: "35/50",
+        points: "982",
+        rank: "6",
+        program: "Graduate Program",
+        avatar: "avatar6.png"
+    },
+    {
+        id: "7",
+        name: "Alice",
+        score: "33/50",
+        points: "980",
+        rank: "7",
+        program: "Graduate Program",
+        avatar: "avatar1.png"
+    },
+    {
+        id: "8",
+        name: "Bob",
+        score: "32/50",
+        points: "978",
+        rank: "8",
+        program: "Graduate Program",
+        avatar: "avatar2.png"
+    },
+    {
+        id: "9",
+        name: "Charlie",
+        score: "30/50",
+        points: "975",
+        rank: "9",
+        program: "Graduate Program",
+        avatar: "avatar3.png"
+    },
+    {
+        id: "10",
+        name: "Diana",
+        score: "28/50",
+        points: "972",
+        rank: "10",
+        program: "Graduate Program",
+        avatar: "avatar4.png"
+    },
+    {
+        id: "11",
+        name: "Edward",
+        score: "27/50",
+        points: "970",
+        rank: "11",
+        program: "Graduate Program",
+        avatar: "avatar5.png"
+    },
+    {
+        id: "12",
+        name: "Fiona",
+        score: "26/50",
+        points: "968",
+        rank: "12",
+        program: "Graduate Program",
+        avatar: "avatar6.png"
+    },
+    {
+        id: "13",
+        name: "George",
+        score: "25/50",
+        points: "965",
+        rank: "13",
+        program: "Graduate Program",
+        avatar: "avatar1.png"
+    },
+    {
+        id: "14",
+        name: "Hannah",
+        score: "23/50",
+        points: "962",
+        rank: "14",
+        program: "Graduate Program",
+        avatar: "avatar2.png"
+    },
+    {
+        id: "15",
+        name: "Ian",
+        score: "22/50",
+        points: "960",
+        rank: "15",
+        program: "Graduate Program",
+        avatar: "avatar3.png"
+    },
+    {
+        id: "16",
+        name: "Julia",
+        score: "20/50",
+        points: "957",
+        rank: "16",
+        program: "Graduate Program",
+        avatar: "avatar4.png"
+    },
+    {
+        id: "17",
+        name: "Kyle",
+        score: "19/50",
+        points: "955",
+        rank: "17",
+        program: "Graduate Program",
+        avatar: "avatar5.png"
+    },
+    {
+        id: "18",
+        name: "Laura",
+        score: "18/50",
+        points: "953",
+        rank: "18",
+        program: "Graduate Program",
+        avatar: "avatar6.png"
+    },
+    {
+        id: "19",
+        name: "Michael",
+        score: "17/50",
+        points: "950",
+        rank: "19",
+        program: "Graduate Program",
+        avatar: "avatar1.png"
+    },
+    {
+        id: "20",
+        name: "Nancy",
+        score: "16/50",
+        points: "947",
+        rank: "20",
+        program: "Graduate Program",
+        avatar: "avatar2.png"
+    },
+    {
+        id: "21",
+        name: "Oliver",
+        score: "15/50",
+        points: "945",
+        rank: "21",
+        program: "Graduate Program",
+        avatar: "avatar3.png"
    }
-];  
+];

 const sortedData = performersData.sort((a, b) => parseInt(a.rank) - parseInt(b.rank));

@@ -148,92 +427,92 @@ type MenuItem = Required<MenuProps>['items'][number];

 const items2: MenuProps['items'] = [
    {
-        key: 'subkq1',
+        key: 'subsd1',
        icon: <AdministrationIcon />,
-        label: 'Administration',
+        label: (<p>&nbsp; Administration</p>),
        children: [
            {
-            key: '1kq',
+            key: '1sd',
            label: (<a href='#'>Class Schedules</a>),
            },
            {
-            key: '2kq',
+            key: '2sd',
            label: (<a href='#'>Classmate Directory</a>),
            },
            {
-            key: '3kq',
+            key: '3sd',
            label: (<a href='#'>Qualifications</a>),
            },
        ],
    },
    {
-        key: 'subkq2',
+        key: 'subsd2',
        icon: <MyCoursesIcon />,
-        label: 'My Courses',
+        label: (<p>&nbsp; My Courses</p>),
        children: [
            {
-            key: '4kq',
+            key: '4sd',
            label: (<a href='#'>Graduate Program</a>),
            },
            {
-            key: '5kq',
+            key: '5sd',
            label: (<a href='#'>Post-Graduate Program</a>),
            },
        ],
    },
    {
-        key: 'subkq3',
+        key: 'subsd3',
        icon: <ExaminationIcon />,
-        label: 'Examinations',
+        label: (<p>&nbsp; Examinations</p>),
        children: [
            {
-            key: '6kq',
+            key: '6sd',
            label: (<a href='#'>Exam Scheduled</a>),
            },
            {
-            key: '7kq',
+            key: '7sd',
            label: (<a href='#'>Upcoming Exam</a>),
            },
            {
-            key: '8kq',
+            key: '8sd',
            label: (<a href='#'>Passed Exam</a>),
            },
        ],
    },
    {
-        key: 'subkq4',
+        key: 'subsd4',
        icon: <CommunityIcon />,
-        label: 'Community',
+        label: (<p>&nbsp; Community</p>),
        children: [
        {
-            key: '9kq',
+            key: '9sd',
            label: (<a href='#'>Exam Scheduled</a>),
        },
        {
-            key: '10kq',
+            key: '10sd',
            label: (<a href='#'>Upcoming Exam</a>),
        },
        {
-            key: '11kq',
+            key: '11sd',
            label: (<a href='#'>Passed Exam</a>),
        },
        ],
    },
    {
-        key: 'subkq5',
+        key: 'subsd5',
        icon: <NotificationIcon />,
-        label: 'Notifications',
+        label: (<p>&nbsp; Notifications</p>),
        children: [
            {
-            key: '12kq',
+            key: '12sd',
            label: (<a href='#'>Exam Scheduled</a>),
            },
            {
-            key: '13kq',
+            key: '13sd',
            label: (<a href='#'>Upcoming Exam</a>),
            },
            {
-            key: '14kq',
+            key: '14sd',
            label: (<a href='#'>Passed Exam</a>),
            },
        ],
@@ -246,17 +525,17 @@ const items2: MenuProps['items'] = [
        style: { marginTop: '100px' },
        children: [
        {   
-            key: '15kq', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, 
+            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: '16kq', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
+            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: '17kq', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
+            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>)
        },     
@@ -317,34 +596,23 @@ const App: React.FC = () => {
        </Header> */}
        <Layout>
            <div >
-            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} width={310} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0,  background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
+            <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>    
-                        <a href="#" className='flex flex-row justify-between border-[1px] border-[#E9E9E9] rounded-[10px] p-2  place-items-center'>
-                            <img className='w-[46px] h-[46px]' src="/assets/man.png" alt="" />
-                            <div>
-                                <p className='text-[16px] font-[500] text-[#6E6E6E]'>My Profile</p>
-                                <p className='text-[22px] font-[700] text-[#000]'>Rayan Holiday</p>
-                            </div>
-                            <img className='' src="../../assets/right-arrow.svg" alt="" />
-                        </a>
                    </div>
                </div>
                <Menu className='custom-menu' mode="inline"  style={{ height: '100%', borderRight: 0, paddingTop: 30, background: 'transparent'}} items={items2} />
            </Sider>
            </div>
            {/* defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} */}
-            <Layout style={{marginLeft: 310, background: '#FFF'}}>
+            <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'>
+                        <div className='container mx-auto  flex flex-row justify-between pr-10'>
                            <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'>Knowledge Quests</p>
-                            </div>
-                            <div className='flex justify-end'>
-                            
                            </div>
                            <div className='flex justify-center place-items-center'>
                                <button className='bg-[#000]  py-2.5 rounded-[8px] text-[#FFF] tetx-[16px] font-[600] inline-flex justify-center place-items-center'>
@@ -367,7 +635,7 @@ const App: React.FC = () => {
                                                <p className='text-[12px] text-[#EF7A0C] font-[500]'>My Profile</p>
                                                <p className='text-[16px] text-[#27549F] font-[700]'>Rayan Holiday</p>
                                            </div>
-                                            <DownOutlined style={{ fontSize: '12px' }} />
+                                            <RightOutlined style={{ fontSize: '12px', paddingRight: '10px'}} />
                                        </div>
                                    </Space>
                                    </a>
@@ -409,7 +677,7 @@ const App: React.FC = () => {
                                                            <p className='text-[14px] font-[600] text-[#9D9D9D]'>{data.question}</p>
                                                        </div>
                                                        </div>
-                                                        <button className='bg-[#000] text-[#FFF] rounded-[8px] px-16 py-3 h-fit text-[18px] font-[600]'>Start</button>
+                                                        <button className='bg-[#000] text-[#FFF] rounded-[8px] px-16 py-3 h-fit text-[18px] font-[600]'>Review</button>
                                                    </div>
                                                ))}
                                            </div>