generated from dwd/boilarplate-remix-tailwind-antd
page3
Suvodip
parent
84cab5341a
commit
5dc331a702
|
|
@ -0,0 +1,746 @@
|
|||
import React, {useState} from 'react';
|
||||
import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, DownOutlined} from '@ant-design/icons';
|
||||
import Icon 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, Tabs} from 'antd';
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
import { Dropdown, Space } from 'antd';
|
||||
import '../../public/assets/knowledge-quest.css';
|
||||
|
||||
let courseData = [
|
||||
{
|
||||
id : "1",
|
||||
title : "Life History of Dr. Maria Montessori",
|
||||
chapter : "1",
|
||||
Program : "Graduate Program",
|
||||
img : "../../assets/course1.jpg"
|
||||
},
|
||||
{
|
||||
id : "2",
|
||||
title : "Introduction to Montessori Methods",
|
||||
chapter : "2",
|
||||
Program : "Graduate Program",
|
||||
img : "../../assets/course2.jpg"
|
||||
},
|
||||
{
|
||||
id : "3",
|
||||
title : "Exercises on Practical Life",
|
||||
chapter : "3",
|
||||
Program : "Graduate Program",
|
||||
img : "../../assets/course3.jpg"
|
||||
}
|
||||
];
|
||||
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: "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: "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: "2",
|
||||
name: "Jackson",
|
||||
score: "45/50",
|
||||
points: "997",
|
||||
rank: "2",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar2.png"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emma Aria",
|
||||
score: "43/50",
|
||||
points: "994",
|
||||
rank: "3",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar3.png"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "John Doe",
|
||||
score: "40/50",
|
||||
points: "990",
|
||||
rank: "4",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar4.png"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jane Cooper",
|
||||
score: "37/50",
|
||||
points: "987",
|
||||
rank: "5",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar5.png"
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "John Doe",
|
||||
score: "35/50",
|
||||
points: "982",
|
||||
rank: "6",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar6.png"
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
name: "Alice",
|
||||
score: "33/50",
|
||||
points: "980",
|
||||
rank: "7",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar1.png"
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
name: "Bob",
|
||||
score: "32/50",
|
||||
points: "978",
|
||||
rank: "8",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar2.png"
|
||||
},
|
||||
{
|
||||
id: "9",
|
||||
name: "Charlie",
|
||||
score: "30/50",
|
||||
points: "975",
|
||||
rank: "9",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar3.png"
|
||||
},
|
||||
{
|
||||
id: "10",
|
||||
name: "Diana",
|
||||
score: "28/50",
|
||||
points: "972",
|
||||
rank: "10",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar4.png"
|
||||
},
|
||||
{
|
||||
id: "11",
|
||||
name: "Edward",
|
||||
score: "27/50",
|
||||
points: "970",
|
||||
rank: "11",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar5.png"
|
||||
},
|
||||
{
|
||||
id: "12",
|
||||
name: "Fiona",
|
||||
score: "26/50",
|
||||
points: "968",
|
||||
rank: "12",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar6.png"
|
||||
},
|
||||
{
|
||||
id: "13",
|
||||
name: "George",
|
||||
score: "25/50",
|
||||
points: "965",
|
||||
rank: "13",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar1.png"
|
||||
},
|
||||
{
|
||||
id: "14",
|
||||
name: "Hannah",
|
||||
score: "23/50",
|
||||
points: "962",
|
||||
rank: "14",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar2.png"
|
||||
},
|
||||
{
|
||||
id: "15",
|
||||
name: "Ian",
|
||||
score: "22/50",
|
||||
points: "960",
|
||||
rank: "15",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar3.png"
|
||||
},
|
||||
{
|
||||
id: "16",
|
||||
name: "Julia",
|
||||
score: "20/50",
|
||||
points: "957",
|
||||
rank: "16",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar4.png"
|
||||
},
|
||||
{
|
||||
id: "17",
|
||||
name: "Kyle",
|
||||
score: "19/50",
|
||||
points: "955",
|
||||
rank: "17",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar5.png"
|
||||
},
|
||||
{
|
||||
id: "18",
|
||||
name: "Laura",
|
||||
score: "18/50",
|
||||
points: "953",
|
||||
rank: "18",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar6.png"
|
||||
},
|
||||
{
|
||||
id: "19",
|
||||
name: "Michael",
|
||||
score: "17/50",
|
||||
points: "950",
|
||||
rank: "19",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar1.png"
|
||||
},
|
||||
{
|
||||
id: "20",
|
||||
name: "Nancy",
|
||||
score: "16/50",
|
||||
points: "947",
|
||||
rank: "20",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar2.png"
|
||||
},
|
||||
{
|
||||
id: "21",
|
||||
name: "Oliver",
|
||||
score: "15/50",
|
||||
points: "945",
|
||||
rank: "21",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar3.png"
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
const sortedData = performersData.sort((a, b) => parseInt(a.rank) - parseInt(b.rank));
|
||||
|
||||
const highestRank = sortedData[0];
|
||||
const secondHighestRank = sortedData[1];
|
||||
const thirdHighestRank = sortedData[2];
|
||||
|
||||
console.log('The highest rank is:', highestRank);
|
||||
console.log('The second highest rank is:', secondHighestRank);
|
||||
console.log('The Third highest rank is:', thirdHighestRank);
|
||||
|
||||
|
||||
|
||||
// const highestRank = performersData.reduce((prev, current) => (prev.rank < current.rank) ? prev : current);
|
||||
|
||||
// console.log('The highest rank is:', highestRank);
|
||||
|
||||
const { Header, Content, Sider } = Layout;
|
||||
|
||||
const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
|
||||
key,
|
||||
label: `navkq ${key}`,
|
||||
}));
|
||||
|
||||
type MenuItem = Required<MenuProps>['items'][number];
|
||||
|
||||
|
||||
const items2: MenuProps['items'] = [
|
||||
{
|
||||
key: 'subkq1',
|
||||
icon: <AdministrationIcon />,
|
||||
label: 'Administration',
|
||||
children: [
|
||||
{
|
||||
key: '1kq',
|
||||
label: (<a href='#'>Class Schedules</a>),
|
||||
},
|
||||
{
|
||||
key: '2kq',
|
||||
label: (<a href='#'>Classmate Directory</a>),
|
||||
},
|
||||
{
|
||||
key: '3kq',
|
||||
label: (<a href='#'>Qualifications</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'subkq2',
|
||||
icon: <MyCoursesIcon />,
|
||||
label: 'My Courses',
|
||||
children: [
|
||||
{
|
||||
key: '4kq',
|
||||
label: (<a href='#'>Graduate Program</a>),
|
||||
},
|
||||
{
|
||||
key: '5kq',
|
||||
label: (<a href='#'>Post-Graduate Program</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'subkq3',
|
||||
icon: <ExaminationIcon />,
|
||||
label: 'Examinations',
|
||||
children: [
|
||||
{
|
||||
key: '6kq',
|
||||
label: (<a href='#'>Exam Scheduled</a>),
|
||||
},
|
||||
{
|
||||
key: '7kq',
|
||||
label: (<a href='#'>Upcoming Exam</a>),
|
||||
},
|
||||
{
|
||||
key: '8kq',
|
||||
label: (<a href='#'>Passed Exam</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'subkq4',
|
||||
icon: <CommunityIcon />,
|
||||
label: 'Community',
|
||||
children: [
|
||||
{
|
||||
key: '9kq',
|
||||
label: (<a href='#'>Exam Scheduled</a>),
|
||||
},
|
||||
{
|
||||
key: '10kq',
|
||||
label: (<a href='#'>Upcoming Exam</a>),
|
||||
},
|
||||
{
|
||||
key: '11kq',
|
||||
label: (<a href='#'>Passed Exam</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'subkq5',
|
||||
icon: <NotificationIcon />,
|
||||
label: 'Notifications',
|
||||
children: [
|
||||
{
|
||||
key: '12kq',
|
||||
label: (<a href='#'>Exam Scheduled</a>),
|
||||
},
|
||||
{
|
||||
key: '13kq',
|
||||
label: (<a href='#'>Upcoming Exam</a>),
|
||||
},
|
||||
{
|
||||
key: '14kq',
|
||||
label: (<a href='#'>Passed Exam</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
// getItem('Files', '9', <FileOutlined />),
|
||||
{
|
||||
key: 'grp',
|
||||
label: '',
|
||||
type: 'group',
|
||||
style: { marginTop: '100px' },
|
||||
children: [
|
||||
{
|
||||
key: '15kq', 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'},
|
||||
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'},
|
||||
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: '01kq',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
label: <a href="https://www.aliyun.com">2nd menu item</a>,
|
||||
key: '02kq',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
label: '3rd menu item',
|
||||
key: '03kq',
|
||||
},
|
||||
];
|
||||
|
||||
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>
|
||||
<>
|
||||
{/* <Button type="primary" onClick={showLoading}>Open Modal</Button> */}
|
||||
<Modal style={{top: '20px', right: '0px'}} title={<p>Loading Modal</p>} footer={ <Button type="primary" onClick={showLoading}> Reload </Button>} loading={loading} open={open} onCancel={() => setOpen(false)} >
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
</Modal>
|
||||
</>
|
||||
{/* <Header style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<div className="demo-logo" />
|
||||
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} style={{ flex: 1, minWidth: 0 }} />
|
||||
</Header> */}
|
||||
<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>
|
||||
{/* defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} */}
|
||||
<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='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-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'>
|
||||
<img src="../../assets/ai-button-icon.svg" alt="" /> AI Generative Quiz
|
||||
</button>
|
||||
<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]'>
|
||||
<svg viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.06445 20.2658V18.2111H7.1191V11.0198C7.1191 9.59872 7.54715 8.33597 8.40325 7.2316C9.25935 6.12723 10.3723 5.40382 11.742 5.06138V4.34225C11.742 3.9142 11.8919 3.55036 12.1915 3.25072C12.4911 2.95109 12.855 2.80127 13.283 2.80127C13.7111 2.80127 14.0749 2.95109 14.3746 3.25072C14.6742 3.55036 14.824 3.9142 14.824 4.34225V5.06138C16.1938 5.40382 17.3067 6.12723 18.1628 7.2316C19.0189 8.33597 19.447 9.59872 19.447 11.0198V18.2111H21.5016V20.2658H5.06445ZM13.283 23.3477C12.718 23.3477 12.2343 23.1465 11.8319 22.7442C11.4296 22.3418 11.2284 21.8581 11.2284 21.2931H15.3377C15.3377 21.8581 15.1365 22.3418 14.7341 22.7442C14.3318 23.1465 13.8481 23.3477 13.283 23.3477ZM9.17374 18.2111H17.3923V11.0198C17.3923 9.88979 16.99 8.9224 16.1852 8.11766C15.3805 7.31293 14.4131 6.91056 13.283 6.91056C12.153 6.91056 11.1856 7.31293 10.3808 8.11766C9.57611 8.9224 9.17374 9.88979 9.17374 11.0198V18.2111Z" fill="black"/>
|
||||
<circle cx="19.4462" cy="19.2384" r="4.23771" fill="#FF0000" stroke="#fff" strokeWidth="2.31148"/>
|
||||
</svg>
|
||||
</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>
|
||||
<DownOutlined style={{ fontSize: '12px' }} />
|
||||
</div>
|
||||
</Space>
|
||||
</a>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section className='container mx-auto my-16'>
|
||||
<div className='grid grid-cols-1 xl:grid-cols-7 gap-y-6 border-[1px] border-[#CFCFCF]'>
|
||||
<div className='xl:col-span-5 border-r-[1px] border-[#CFCFCF]'>
|
||||
<div className=''>
|
||||
<Tabs className='' defaultActiveKey="1" >
|
||||
<TabPane className='' tab="All" key="1">
|
||||
<div className='flex flex-col gap-6'>
|
||||
{knowledgeData.map(data => (
|
||||
<div key={data.id} className='flex flex-row justify-between px-6 place-items-center'>
|
||||
<div className='flex flex-row justify-between gap-6'>
|
||||
<img src={data.img} alt="" />
|
||||
<div className='flex flex-col space-y-3'>
|
||||
<h2 className='text-[16px] font-[700] text-[#000]'>{data.title}</h2>
|
||||
<p className='text-[14px] font-[600] text-[#525252]'>{data.challenge}</p>
|
||||
<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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</TabPane>
|
||||
<TabPane tab="Completed" key="2">
|
||||
<div className='flex flex-col gap-6'>
|
||||
{knowledgeData.map(data => (
|
||||
<div key={data.id} className='flex flex-row justify-between px-6 place-items-center'>
|
||||
<div className='flex flex-row justify-between gap-6'>
|
||||
<img src={data.img} alt="" />
|
||||
<div className='flex flex-col space-y-3'>
|
||||
<h2 className='text-[16px] font-[700] text-[#000]'>{data.title}</h2>
|
||||
<p className='text-[14px] font-[600] text-[#525252]'>{data.challenge}</p>
|
||||
<p className='text-[14px] font-[600] text-[#9D9D9D]'>{data.question}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className='bg-[#000] text-[#FFF] rounded-[8px] px-16 py-3 h-fit text-[18px] font-[600]'>Review</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
{/* <h2 className='text-[20px] font-[700] inline-flex p-6'>Knowledge Quests <img src="../../assets/right-arrow.svg" alt="" /></h2> */}
|
||||
</div>
|
||||
<div className='xl:col-span-2'>
|
||||
<h2 className='text-[20px] font-[700] inline-flex px-4 pt-4'>Top Performers <img src="../../assets/right-arrow.svg" alt="" /></h2>
|
||||
<p className='text-[16px] font-[700] text-[#6E6E6E] px-4 pb-4 mb-28'>Knowledge Quest</p>
|
||||
<div className='flex flex-row justify-between place-items-center space-x-2 border-b-[1px] border-[#CFCFCF]'>
|
||||
<div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||
<img className='mx-auto h-[52px] w-[60px] ' src={secondHighestRank.avatar} alt="" />
|
||||
<img className='absolute mt-12' src="../../assets/bacth2.svg" alt="" />
|
||||
</div>
|
||||
<p className='text-[12px] font-[700] text-center mt-4'>{secondHighestRank.name}</p>
|
||||
<p className='text-[12px] font-[700] text-center'>{secondHighestRank.score}</p>
|
||||
</div>
|
||||
<div className='w-full mx-auto h-[130px] -mt-[42px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||
<img className='-mt-10' src="../../assets/crown.png" alt="" />
|
||||
<img className='mx-auto h-[52px] w-[60px]' src={highestRank.avatar} alt="" />
|
||||
<img className='absolute mt-12' src="../../assets/bacth1.svg" alt="" />
|
||||
</div>
|
||||
<p className='text-[12px] font-[700] text-center mt-4'>{highestRank.name}</p>
|
||||
<p className='text-[12px] font-[700] text-center'>{highestRank.score}</p>
|
||||
</div>
|
||||
<div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||
<img className='mx-auto h-[52px] w-[60px]' src={thirdHighestRank.avatar} alt="" />
|
||||
<img className='absolute mt-12' src="../../assets/bacth3.svg" alt="" />
|
||||
</div>
|
||||
<p className='text-[12px] font-[700] text-center mt-4'>{thirdHighestRank.name}</p>
|
||||
<p className='text-[12px] font-[700] text-center'>{thirdHighestRank.score}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
{sortedData.slice(3).map(data => (
|
||||
<div key={data.id} className='flex flex-row justify-between place-items-center border-b-[1px] border-[#CFCFCF] p-2'>
|
||||
<p className='text-[11px] font-[700]'># {data.rank}</p>
|
||||
<img className='w-[35px] h-[35px]' src={data.avatar} alt="" />
|
||||
<div>
|
||||
<p className='text-[14px] font-[700]'>{data.name}</p>
|
||||
<p className='text-[10px] font-[700] text-[#6E6E6E]'>{data.program}</p>
|
||||
</div>
|
||||
<div className='flex flex-col justify-center place-items-center'>
|
||||
<img src="../../assets/points-icon.svg" alt="" />
|
||||
<p className='text-[10px] font-[700]'>{data.points} Points</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
export default App;
|
||||
|
|
@ -0,0 +1,468 @@
|
|||
import React, {useState} from 'react';
|
||||
import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, DownOutlined} from '@ant-design/icons';
|
||||
import Icon 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 { Dropdown, Space } from 'antd';
|
||||
import '../../public/assets/student-dashboard.css';
|
||||
|
||||
let courseData = [
|
||||
{
|
||||
id : "1",
|
||||
title : "Life History of Dr. Maria Montessori",
|
||||
chapter : "1",
|
||||
Program : "Graduate Program",
|
||||
img : "../../assets/course1.jpg"
|
||||
},
|
||||
{
|
||||
id : "2",
|
||||
title : "Introduction to Montessori Methods",
|
||||
chapter : "2",
|
||||
Program : "Graduate Program",
|
||||
img : "../../assets/course2.jpg"
|
||||
},
|
||||
{
|
||||
id : "3",
|
||||
title : "Exercises on Practical Life",
|
||||
chapter : "3",
|
||||
Program : "Graduate Program",
|
||||
img : "../../assets/course3.jpg"
|
||||
}
|
||||
];
|
||||
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: "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"
|
||||
}
|
||||
];
|
||||
|
||||
let performersData = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Eiden",
|
||||
score: "48/50",
|
||||
points: "999",
|
||||
rank: "1",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar1.png"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Jackson",
|
||||
score: "45/50",
|
||||
points: "997",
|
||||
rank: "2",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar2.png"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emma Aria",
|
||||
score: "43/50",
|
||||
points: "994",
|
||||
rank: "3",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar3.png"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "John Doe",
|
||||
score: "40/50",
|
||||
points: "990",
|
||||
rank: "4",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar4.png"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jane Cooper",
|
||||
score: "37/50",
|
||||
points: "987",
|
||||
rank: "5",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar5.png"
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "John Doe",
|
||||
score: "35/50",
|
||||
points: "982",
|
||||
rank: "6",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar6.png"
|
||||
}
|
||||
];
|
||||
|
||||
const sortedData = performersData.sort((a, b) => parseInt(a.rank) - parseInt(b.rank));
|
||||
|
||||
const highestRank = sortedData[0];
|
||||
const secondHighestRank = sortedData[1];
|
||||
const thirdHighestRank = sortedData[2];
|
||||
|
||||
console.log('The highest rank is:', highestRank);
|
||||
console.log('The second highest rank is:', secondHighestRank);
|
||||
console.log('The Third highest rank is:', thirdHighestRank);
|
||||
|
||||
|
||||
|
||||
// const highestRank = performersData.reduce((prev, current) => (prev.rank < current.rank) ? prev : current);
|
||||
|
||||
// console.log('The highest rank is:', highestRank);
|
||||
|
||||
const { Header, 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: 'Administration',
|
||||
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: 'My Courses',
|
||||
children: [
|
||||
{
|
||||
key: '4sd',
|
||||
label: (<a href='#'>Graduate Program</a>),
|
||||
},
|
||||
{
|
||||
key: '5sd',
|
||||
label: (<a href='#'>Post-Graduate Program</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'subsd3',
|
||||
icon: <ExaminationIcon />,
|
||||
label: 'Examinations',
|
||||
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: 'Community',
|
||||
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: 'Notifications',
|
||||
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>
|
||||
<>
|
||||
{/* <Button type="primary" onClick={showLoading}>Open Modal</Button> */}
|
||||
<Modal style={{top: '20px', right: '0px'}} title={<p>Loading Modal</p>} footer={ <Button type="primary" onClick={showLoading}> Reload </Button>} loading={loading} open={open} onCancel={() => setOpen(false)} >
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
</Modal>
|
||||
</>
|
||||
{/* <Header style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<div className="demo-logo" />
|
||||
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} style={{ flex: 1, minWidth: 0 }} />
|
||||
</Header> */}
|
||||
<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>
|
||||
<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: 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='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]'>
|
||||
<svg viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.06445 20.2658V18.2111H7.1191V11.0198C7.1191 9.59872 7.54715 8.33597 8.40325 7.2316C9.25935 6.12723 10.3723 5.40382 11.742 5.06138V4.34225C11.742 3.9142 11.8919 3.55036 12.1915 3.25072C12.4911 2.95109 12.855 2.80127 13.283 2.80127C13.7111 2.80127 14.0749 2.95109 14.3746 3.25072C14.6742 3.55036 14.824 3.9142 14.824 4.34225V5.06138C16.1938 5.40382 17.3067 6.12723 18.1628 7.2316C19.0189 8.33597 19.447 9.59872 19.447 11.0198V18.2111H21.5016V20.2658H5.06445ZM13.283 23.3477C12.718 23.3477 12.2343 23.1465 11.8319 22.7442C11.4296 22.3418 11.2284 21.8581 11.2284 21.2931H15.3377C15.3377 21.8581 15.1365 22.3418 14.7341 22.7442C14.3318 23.1465 13.8481 23.3477 13.283 23.3477ZM9.17374 18.2111H17.3923V11.0198C17.3923 9.88979 16.99 8.9224 16.1852 8.11766C15.3805 7.31293 14.4131 6.91056 13.283 6.91056C12.153 6.91056 11.1856 7.31293 10.3808 8.11766C9.57611 8.9224 9.17374 9.88979 9.17374 11.0198V18.2111Z" fill="black"/>
|
||||
<circle cx="19.4462" cy="19.2384" r="4.23771" fill="#FF0000" stroke="#fff" strokeWidth="2.31148"/>
|
||||
</svg>
|
||||
</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>
|
||||
<DownOutlined style={{ fontSize: '12px' }} />
|
||||
</div>
|
||||
</Space>
|
||||
</a>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section className='border-b-[1px] border-[#CFCFCF]'>
|
||||
<div className='container mx-auto'>
|
||||
<h2 className='text-[20px] font-[700] my-4 py-2 inline-flex leading-[24px]'>Graduate Program</h2>
|
||||
</div>
|
||||
</section>
|
||||
<section className='bg-[#FCFCFC]'>
|
||||
<div className='container mx-auto'>
|
||||
<h2 className='text-[20px] font-[700] my-4 inline-flex leading-[24px]'>Continue Learning <img src="../../assets/right-arrow.svg" alt="" /></h2>
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
|
||||
{courseData.map(data=>(
|
||||
<div key={data.id} className=''>
|
||||
<img className='w-full rounded-[10px]' src={data.img} alt="" />
|
||||
<h2 className='text-[16px] font-[700] my-2'>{data.title}</h2>
|
||||
<p className='text-[14px] font-[500] text-[#6E6E6E]'>
|
||||
<span>Chapter {data.chapter}</span> •
|
||||
<span>{data.Program}</span>
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* knowledgeData */}
|
||||
<section className='container mx-auto my-16'>
|
||||
<div className='grid grid-cols-1 xl:grid-cols-7 gap-y-6 border-[1px] border-[#CFCFCF]'>
|
||||
<div className='xl:col-span-5 border-r-[1px] border-[#CFCFCF]'>
|
||||
<h2 className='text-[20px] font-[700] inline-flex p-6'>Knowledge Quests <img src="../../assets/right-arrow.svg" alt="" /></h2>
|
||||
<div className='flex flex-col gap-6'>
|
||||
{knowledgeData.map(data => (
|
||||
<div key={data.id} className='flex flex-row justify-between px-6 place-items-center'>
|
||||
<div className='flex flex-row justify-between gap-6'>
|
||||
<img src={data.img} alt="" />
|
||||
<div className='flex flex-col space-y-3'>
|
||||
<h2 className='text-[16px] font-[700] text-[#000]'>{data.title}</h2>
|
||||
<p className='text-[14px] font-[600] text-[#525252]'>{data.challenge}</p>
|
||||
<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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className='xl:col-span-2'>
|
||||
<h2 className='text-[20px] font-[700] inline-flex px-4 pt-4'>Top Performers <img src="../../assets/right-arrow.svg" alt="" /></h2>
|
||||
<p className='text-[16px] font-[700] text-[#6E6E6E] px-4 pb-4 mb-28'>Knowledge Quest</p>
|
||||
<div className='flex flex-row justify-between place-items-center space-x-2 border-b-[1px] border-[#CFCFCF]'>
|
||||
<div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||
<img className='mx-auto h-[52px] w-[60px] ' src={secondHighestRank.avatar} alt="" />
|
||||
<img className='absolute mt-12' src="../../assets/bacth2.svg" alt="" />
|
||||
</div>
|
||||
<p className='text-[12px] font-[700] text-center mt-4'>{secondHighestRank.name}</p>
|
||||
<p className='text-[12px] font-[700] text-center'>{secondHighestRank.score}</p>
|
||||
</div>
|
||||
<div className='w-full mx-auto h-[130px] -mt-[42px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||
<img className='-mt-10' src="../../assets/crown.png" alt="" />
|
||||
<img className='mx-auto h-[52px] w-[60px]' src={highestRank.avatar} alt="" />
|
||||
<img className='absolute mt-12' src="../../assets/bacth1.svg" alt="" />
|
||||
</div>
|
||||
<p className='text-[12px] font-[700] text-center mt-4'>{highestRank.name}</p>
|
||||
<p className='text-[12px] font-[700] text-center'>{highestRank.score}</p>
|
||||
</div>
|
||||
<div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||
<img className='mx-auto h-[52px] w-[60px]' src={thirdHighestRank.avatar} alt="" />
|
||||
<img className='absolute mt-12' src="../../assets/bacth3.svg" alt="" />
|
||||
</div>
|
||||
<p className='text-[12px] font-[700] text-center mt-4'>{thirdHighestRank.name}</p>
|
||||
<p className='text-[12px] font-[700] text-center'>{thirdHighestRank.score}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
{sortedData.slice(3).map(data => (
|
||||
<div className='flex flex-row justify-between place-items-center border-b-[1px] border-[#CFCFCF] p-2'>
|
||||
<p className='text-[11px] font-[700]'># {data.rank}</p>
|
||||
<img className='w-[35px] h-[35px]' src={data.avatar} alt="" />
|
||||
<div>
|
||||
<p className='text-[14px] font-[700]'>{data.name}</p>
|
||||
<p className='text-[10px] font-[700] text-[#6E6E6E]'>{data.program}</p>
|
||||
</div>
|
||||
<div className='flex flex-col justify-center place-items-center'>
|
||||
<img src="../../assets/points-icon.svg" alt="" />
|
||||
<p className='text-[10px] font-[700]'>{data.points} Points</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
export default App;
|
||||
|
|
@ -235,7 +235,7 @@ const App: React.FC = () => {
|
|||
<Layout style={{marginLeft: 310,}}>
|
||||
<Content style={{ background: colorBgContainer, overflow: 'initial',}}>
|
||||
<div className='border-b-[1px] py-2'>
|
||||
<div className='container mx-auto px-10 flex flex-row justify-between'>
|
||||
<div className='container mx-auto flex flex-row justify-between'>
|
||||
<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>
|
||||
|
|
@ -268,7 +268,7 @@ const App: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
<section className=''>
|
||||
<div className='container mx-auto px-10'>
|
||||
<div className='container mx-auto '>
|
||||
<h2 className='text-[20px] font-[700] my-4 inline-flex leading-[24px]'>Course Content <img src="../../assets/right-arrow.svg" alt="" /></h2>
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
|
||||
{courseData.map(data=>(
|
||||
|
|
@ -284,7 +284,7 @@ const App: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className='container mx-auto px-10 my-16'>
|
||||
<section className='container mx-auto my-16'>
|
||||
<div className='grid grid-cols-1 lg:grid-cols-3 gap-6'>
|
||||
<div className='flex flex-col md:col-span-2 gap-6'>
|
||||
<div className='flex flex-col xl:flex-row gap-6'>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,356 @@
|
|||
import React, {useState} from 'react';
|
||||
import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, DownOutlined} from '@ant-design/icons';
|
||||
import Icon 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 { Dropdown, Space } from 'antd';
|
||||
import '../../public/assets/ss1.css';
|
||||
|
||||
let courseData = [
|
||||
{
|
||||
id : "1",
|
||||
title : "Life History of Dr. Maria Montessori",
|
||||
chapter : "1",
|
||||
Program : "Graduate Program",
|
||||
img : "../../assets/course-blank.jpg"
|
||||
},
|
||||
{
|
||||
id : "2",
|
||||
title : "Introduction to Montessori Methods",
|
||||
chapter : "2",
|
||||
Program : "Graduate Program",
|
||||
img : "../../assets/course-blank.jpg"
|
||||
},
|
||||
{
|
||||
id : "3",
|
||||
title : "Exercises on Practical Life",
|
||||
chapter : "3",
|
||||
Program : "Graduate Program",
|
||||
img : "../../assets/course-blank.jpg"
|
||||
}
|
||||
]
|
||||
|
||||
const { Header, Content, Sider } = Layout;
|
||||
|
||||
const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
|
||||
key,
|
||||
label: `navx ${key}`,
|
||||
}));
|
||||
|
||||
type MenuItem = Required<MenuProps>['items'][number];
|
||||
|
||||
|
||||
const items2: MenuProps['items'] = [
|
||||
{
|
||||
key: 'subx1',
|
||||
icon: <AdministrationIcon />,
|
||||
label: 'Administration',
|
||||
children: [
|
||||
{
|
||||
key: '1x',
|
||||
label: (<a href='#'>Class Schedules</a>),
|
||||
},
|
||||
{
|
||||
key: '2x',
|
||||
label: (<a href='#'>Classmate Directory</a>),
|
||||
},
|
||||
{
|
||||
key: '3x',
|
||||
label: (<a href='#'>Qualifications</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'subx2',
|
||||
icon: <MyCoursesIcon />,
|
||||
label: 'My Courses',
|
||||
children: [
|
||||
{
|
||||
key: '4x',
|
||||
label: (<a href='#'>Graduate Program</a>),
|
||||
},
|
||||
{
|
||||
key: '5x',
|
||||
label: (<a href='#'>Post-Graduate Program</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'subx3',
|
||||
icon: <ExaminationIcon />,
|
||||
label: 'Examinations',
|
||||
children: [
|
||||
{
|
||||
key: '6x',
|
||||
label: (<a href='#'>Exam Scheduled</a>),
|
||||
},
|
||||
{
|
||||
key: '7x',
|
||||
label: (<a href='#'>Upcoming Exam</a>),
|
||||
},
|
||||
{
|
||||
key: '8x',
|
||||
label: (<a href='#'>Passed Exam</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'subx4',
|
||||
icon: <CommunityIcon />,
|
||||
label: 'Community',
|
||||
children: [
|
||||
{
|
||||
key: '9x',
|
||||
label: (<a href='#'>Exam Scheduled</a>),
|
||||
},
|
||||
{
|
||||
key: '10x',
|
||||
label: (<a href='#'>Upcoming Exam</a>),
|
||||
},
|
||||
{
|
||||
key: '11x',
|
||||
label: (<a href='#'>Passed Exam</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'subx5',
|
||||
icon: <NotificationIcon />,
|
||||
label: 'Notifications',
|
||||
children: [
|
||||
{
|
||||
key: '12x',
|
||||
label: (<a href='#'>Exam Scheduled</a>),
|
||||
},
|
||||
{
|
||||
key: '13x',
|
||||
label: (<a href='#'>Upcoming Exam</a>),
|
||||
},
|
||||
{
|
||||
key: '14x',
|
||||
label: (<a href='#'>Passed Exam</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
// getItem('Files', '9', <FileOutlined />),
|
||||
{
|
||||
key: 'grp',
|
||||
label: '',
|
||||
type: 'group',
|
||||
style: { marginTop: '100px' },
|
||||
children: [
|
||||
{
|
||||
key: '15x', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
|
||||
icon: React.createElement(SettingOutlined, { style: { color: '#FFF' } }),
|
||||
label: (<h2 className='text-[18px] font-[700] text-[#FFF]'>Settings</h2>)
|
||||
},
|
||||
{
|
||||
key: '16x', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
|
||||
icon: React.createElement(QuestionCircleOutlined, { style: { color: '#FFF' } }),
|
||||
label: (<h2 className='text-[18px] font-[700] text-[#FFF]'>Help & Support</h2>)
|
||||
},
|
||||
{
|
||||
key: '17x', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
|
||||
icon: React.createElement(LogoutOutlined, { style: { color: '#FFF' } }),
|
||||
label: (<h2 className='text-[18px] font-[700] text-[#FFF]'>Logout</h2>)
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
label: <a href="https://www.antgroup.com">1st menu item</a>,
|
||||
key: '01',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
label: <a href="https://www.aliyun.com">2nd menu item</a>,
|
||||
key: '02',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
label: '3rd menu item',
|
||||
key: '03',
|
||||
},
|
||||
];
|
||||
|
||||
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>
|
||||
<>
|
||||
{/* <Button type="primary" onClick={showLoading}>Open Modal</Button> */}
|
||||
<Modal style={{top: '20px', right: '0px'}} title={<p>Loading Modal</p>} footer={ <Button type="primary" onClick={showLoading}> Reload </Button>} loading={loading} open={open} onCancel={() => setOpen(false)} >
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
</Modal>
|
||||
</>
|
||||
{/* <Header style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<div className="demo-logo" />
|
||||
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} style={{ flex: 1, minWidth: 0 }} />
|
||||
</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: 'linear-gradient(180deg, #2F1B08D6 0%, #000000D6 83.93%)', 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-[#FFF]'>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-[#D0D0D0]'>My Profile</p>
|
||||
<p className='text-[22px] font-[700] text-[#FFF]'>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}}>
|
||||
<Content style={{ overflow: 'initial',}}>
|
||||
<div className='border-b-[1px] py-2'>
|
||||
<div className='container mx-auto flex flex-row justify-between'>
|
||||
<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]'>
|
||||
<svg viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.06445 20.2658V18.2111H7.1191V11.0198C7.1191 9.59872 7.54715 8.33597 8.40325 7.2316C9.25935 6.12723 10.3723 5.40382 11.742 5.06138V4.34225C11.742 3.9142 11.8919 3.55036 12.1915 3.25072C12.4911 2.95109 12.855 2.80127 13.283 2.80127C13.7111 2.80127 14.0749 2.95109 14.3746 3.25072C14.6742 3.55036 14.824 3.9142 14.824 4.34225V5.06138C16.1938 5.40382 17.3067 6.12723 18.1628 7.2316C19.0189 8.33597 19.447 9.59872 19.447 11.0198V18.2111H21.5016V20.2658H5.06445ZM13.283 23.3477C12.718 23.3477 12.2343 23.1465 11.8319 22.7442C11.4296 22.3418 11.2284 21.8581 11.2284 21.2931H15.3377C15.3377 21.8581 15.1365 22.3418 14.7341 22.7442C14.3318 23.1465 13.8481 23.3477 13.283 23.3477ZM9.17374 18.2111H17.3923V11.0198C17.3923 9.88979 16.99 8.9224 16.1852 8.11766C15.3805 7.31293 14.4131 6.91056 13.283 6.91056C12.153 6.91056 11.1856 7.31293 10.3808 8.11766C9.57611 8.9224 9.17374 9.88979 9.17374 11.0198V18.2111Z" fill="black"/>
|
||||
<circle cx="19.4462" cy="19.2384" r="4.23771" fill="#FF0000" stroke="#fff" strokeWidth="2.31148"/>
|
||||
</svg>
|
||||
</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>
|
||||
<DownOutlined style={{ fontSize: '12px' }} />
|
||||
</div>
|
||||
</Space>
|
||||
</a>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section className=''>
|
||||
<div className='container mx-auto '>
|
||||
<h2 className='text-[20px] font-[700] my-4 inline-flex leading-[24px]'>Course Content <img src="../../assets/right-arrow.svg" alt="" /></h2>
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
|
||||
{courseData.map(data=>(
|
||||
<div className=''>
|
||||
<img className='w-full rounded-[10px]' src={data.img} alt="" />
|
||||
<h2 className='text-[16px] font-[700] my-2'>{data.title}</h2>
|
||||
<p className='text-[14px] font-[500] text-[#6E6E6E]'>
|
||||
<span>Chapter {data.chapter}</span> •
|
||||
<span>{data.Program}</span>
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className='container mx-auto my-16'>
|
||||
<div className='grid grid-cols-1 lg:grid-cols-3 gap-6'>
|
||||
<div className='flex flex-col md:col-span-2 gap-6'>
|
||||
<div className='flex flex-col xl:flex-row gap-6'>
|
||||
<div className='border-[1px] border-[#E9E9E9] w-full bg-[#FCFCFC] rounded-[10px] '>
|
||||
<div className='flex flex-row justify-between border-b-[1px] border-[#E9E9E9]'>
|
||||
<h2 className='text-[20px] font-[700] p-4'>Attendance</h2>
|
||||
<img src="../../assets/right-arrow.svg" alt="" />
|
||||
</div>
|
||||
<p className='text-center py-20'>Graph</p>
|
||||
</div>
|
||||
<div className='border-[1px] border-[#E9E9E9] w-full bg-[#FCFCFC] rounded-[10px]'>
|
||||
<div className='flex flex-row justify-between border-b-[1px] border-[#E9E9E9]'>
|
||||
<h2 className='text-[20px] font-[700] p-4'>Upcoming Classes</h2>
|
||||
<img src="../../assets/right-arrow.svg" alt="" />
|
||||
</div>
|
||||
<div className='flex flex-col space-y-16'>
|
||||
<div className='border-b-[1px] border-[#CFCFCF]'></div>
|
||||
<div className='border-b-[1px] border-[#CFCFCF]'></div>
|
||||
<div className='border-b-[1px] border-[#CFCFCF]'></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='border-[1px] border-[#E9E9E9] w-full bg-[#FCFCFC] rounded-[10px]'>
|
||||
<h2 className='text-[20px] font-[700] p-4 border-b-[1px] border-[#E9E9E9]'>Accomplishments / Qualifications</h2>
|
||||
<div className='flex flex-row justify-between p-6 overflow-x-auto'>
|
||||
<img className='' src="../../assets/rectangle.jpg" alt="" />
|
||||
<img className='' src="../../assets/rectangle.jpg" alt="" />
|
||||
<img className='' src="../../assets/rectangle.jpg" alt="" />
|
||||
<img className='' src="../../assets/rectangle.jpg" alt="" />
|
||||
<img className='' src="../../assets/rectangle.jpg" alt="" />
|
||||
<img className='' src="../../assets/rectangle.jpg" alt="" />
|
||||
<img className='' src="../../assets/rectangle.jpg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='md:col-span-1 border-[1px] border-[#E9E9E9] w-full bg-[#FCFCFC] rounded-[10px]'>
|
||||
<h2 className='text-[20px] font-[700] p-4 border-b-[1px] border-[#E9E9E9]'>Upcoming Tests</h2>
|
||||
<div className='flex flex-col'>
|
||||
<div className='p-4 border-b-[1px] border-[#CFCFCF]'>
|
||||
<img className='h-[44px] w-[79px]' src="../../assets/rectangle.jpg" alt="" />
|
||||
</div>
|
||||
<div className='p-4 border-b-[1px] border-[#CFCFCF]'>
|
||||
<img className='h-[44px] w-[79px]' src="../../assets/rectangle.jpg" alt="" />
|
||||
</div>
|
||||
<div className='p-4 border-b-[1px] border-[#CFCFCF]'>
|
||||
<img className='h-[44px] w-[79px]' src="../../assets/rectangle.jpg" alt="" />
|
||||
</div>
|
||||
<div className='p-4 border-b-[1px] border-[#CFCFCF]'>
|
||||
<img className='h-[44px] w-[79px]' src="../../assets/rectangle.jpg" alt="" />
|
||||
</div>
|
||||
<div className='p-4 border-b-[1px] border-[#CFCFCF]'>
|
||||
<img className='h-[44px] w-[79px]' src="../../assets/rectangle.jpg" alt="" />
|
||||
</div>
|
||||
<div className='p-4 border-b-[1px] border-[#CFCFCF]'>
|
||||
<img className='h-[44px] w-[79px]' src="../../assets/rectangle.jpg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import type { MetaFunction } from "@remix-run/node";
|
||||
import TestComponent from '../components/TestComponent'; // Fix typo here
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<div>
|
||||
<TestComponent /> {/* Ensure the component name matches the import */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import type { MetaFunction } from "@remix-run/node";
|
||||
import KnowledgeQuest from '../components/KnowledgeQuest'
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<div>
|
||||
<KnowledgeQuest /> {/* Ensure the component name matches the import */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import type { MetaFunction } from "@remix-run/node";
|
||||
import StudentDashboard from '../components/StudentDashboard'
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<div>
|
||||
<StudentDashboard /> {/* Ensure the component name matches the import */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,476 @@
|
|||
import React, {useState} from 'react';
|
||||
import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, DownOutlined} from '@ant-design/icons';
|
||||
import Icon 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, Tabs} from 'antd';
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
import { Dropdown, Space } from 'antd';
|
||||
import '../../public/assets/knowledge-quest.css';
|
||||
|
||||
let courseData = [
|
||||
{
|
||||
id : "1",
|
||||
title : "Life History of Dr. Maria Montessori",
|
||||
chapter : "1",
|
||||
Program : "Graduate Program",
|
||||
img : "../../assets/course1.jpg"
|
||||
},
|
||||
{
|
||||
id : "2",
|
||||
title : "Introduction to Montessori Methods",
|
||||
chapter : "2",
|
||||
Program : "Graduate Program",
|
||||
img : "../../assets/course2.jpg"
|
||||
},
|
||||
{
|
||||
id : "3",
|
||||
title : "Exercises on Practical Life",
|
||||
chapter : "3",
|
||||
Program : "Graduate Program",
|
||||
img : "../../assets/course3.jpg"
|
||||
}
|
||||
];
|
||||
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: "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"
|
||||
}
|
||||
];
|
||||
|
||||
let performersData = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Eiden",
|
||||
score: "48/50",
|
||||
points: "999",
|
||||
rank: "1",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar1.png"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Jackson",
|
||||
score: "45/50",
|
||||
points: "997",
|
||||
rank: "2",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar2.png"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emma Aria",
|
||||
score: "43/50",
|
||||
points: "994",
|
||||
rank: "3",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar3.png"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "John Doe",
|
||||
score: "40/50",
|
||||
points: "990",
|
||||
rank: "4",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar4.png"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jane Cooper",
|
||||
score: "37/50",
|
||||
points: "987",
|
||||
rank: "5",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar5.png"
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "John Doe",
|
||||
score: "35/50",
|
||||
points: "982",
|
||||
rank: "6",
|
||||
program: "Graduate Program",
|
||||
avatar: "../../assets/avatar6.png"
|
||||
}
|
||||
];
|
||||
|
||||
const sortedData = performersData.sort((a, b) => parseInt(a.rank) - parseInt(b.rank));
|
||||
|
||||
const highestRank = sortedData[0];
|
||||
const secondHighestRank = sortedData[1];
|
||||
const thirdHighestRank = sortedData[2];
|
||||
|
||||
console.log('The highest rank is:', highestRank);
|
||||
console.log('The second highest rank is:', secondHighestRank);
|
||||
console.log('The Third highest rank is:', thirdHighestRank);
|
||||
|
||||
|
||||
|
||||
// const highestRank = performersData.reduce((prev, current) => (prev.rank < current.rank) ? prev : current);
|
||||
|
||||
// console.log('The highest rank is:', highestRank);
|
||||
|
||||
const { Header, Content, Sider } = Layout;
|
||||
|
||||
const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
|
||||
key,
|
||||
label: `navkq ${key}`,
|
||||
}));
|
||||
|
||||
type MenuItem = Required<MenuProps>['items'][number];
|
||||
|
||||
|
||||
const items2: MenuProps['items'] = [
|
||||
{
|
||||
key: 'subkq1',
|
||||
icon: <AdministrationIcon />,
|
||||
label: 'Administration',
|
||||
children: [
|
||||
{
|
||||
key: '1kq',
|
||||
label: (<a href='#'>Class Schedules</a>),
|
||||
},
|
||||
{
|
||||
key: '2kq',
|
||||
label: (<a href='#'>Classmate Directory</a>),
|
||||
},
|
||||
{
|
||||
key: '3kq',
|
||||
label: (<a href='#'>Qualifications</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'subkq2',
|
||||
icon: <MyCoursesIcon />,
|
||||
label: 'My Courses',
|
||||
children: [
|
||||
{
|
||||
key: '4kq',
|
||||
label: (<a href='#'>Graduate Program</a>),
|
||||
},
|
||||
{
|
||||
key: '5kq',
|
||||
label: (<a href='#'>Post-Graduate Program</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'subkq3',
|
||||
icon: <ExaminationIcon />,
|
||||
label: 'Examinations',
|
||||
children: [
|
||||
{
|
||||
key: '6kq',
|
||||
label: (<a href='#'>Exam Scheduled</a>),
|
||||
},
|
||||
{
|
||||
key: '7kq',
|
||||
label: (<a href='#'>Upcoming Exam</a>),
|
||||
},
|
||||
{
|
||||
key: '8kq',
|
||||
label: (<a href='#'>Passed Exam</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'subkq4',
|
||||
icon: <CommunityIcon />,
|
||||
label: 'Community',
|
||||
children: [
|
||||
{
|
||||
key: '9kq',
|
||||
label: (<a href='#'>Exam Scheduled</a>),
|
||||
},
|
||||
{
|
||||
key: '10kq',
|
||||
label: (<a href='#'>Upcoming Exam</a>),
|
||||
},
|
||||
{
|
||||
key: '11kq',
|
||||
label: (<a href='#'>Passed Exam</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'subkq5',
|
||||
icon: <NotificationIcon />,
|
||||
label: 'Notifications',
|
||||
children: [
|
||||
{
|
||||
key: '12kq',
|
||||
label: (<a href='#'>Exam Scheduled</a>),
|
||||
},
|
||||
{
|
||||
key: '13kq',
|
||||
label: (<a href='#'>Upcoming Exam</a>),
|
||||
},
|
||||
{
|
||||
key: '14kq',
|
||||
label: (<a href='#'>Passed Exam</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
// getItem('Files', '9', <FileOutlined />),
|
||||
{
|
||||
key: 'grp',
|
||||
label: '',
|
||||
type: 'group',
|
||||
style: { marginTop: '100px' },
|
||||
children: [
|
||||
{
|
||||
key: '15kq', 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'},
|
||||
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'},
|
||||
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: '01kq',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
label: <a href="https://www.aliyun.com">2nd menu item</a>,
|
||||
key: '02kq',
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
label: '3rd menu item',
|
||||
key: '03kq',
|
||||
},
|
||||
];
|
||||
|
||||
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>
|
||||
<>
|
||||
{/* <Button type="primary" onClick={showLoading}>Open Modal</Button> */}
|
||||
<Modal style={{top: '20px', right: '0px'}} title={<p>Loading Modal</p>} footer={ <Button type="primary" onClick={showLoading}> Reload </Button>} loading={loading} open={open} onCancel={() => setOpen(false)} >
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
</Modal>
|
||||
</>
|
||||
{/* <Header style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<div className="demo-logo" />
|
||||
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} style={{ flex: 1, minWidth: 0 }} />
|
||||
</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'}}>
|
||||
<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'}}>
|
||||
<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='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'>
|
||||
<img src="../../assets/ai-button-icon.svg" alt="" /> AI Generative Quiz
|
||||
</button>
|
||||
<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]'>
|
||||
<svg viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.06445 20.2658V18.2111H7.1191V11.0198C7.1191 9.59872 7.54715 8.33597 8.40325 7.2316C9.25935 6.12723 10.3723 5.40382 11.742 5.06138V4.34225C11.742 3.9142 11.8919 3.55036 12.1915 3.25072C12.4911 2.95109 12.855 2.80127 13.283 2.80127C13.7111 2.80127 14.0749 2.95109 14.3746 3.25072C14.6742 3.55036 14.824 3.9142 14.824 4.34225V5.06138C16.1938 5.40382 17.3067 6.12723 18.1628 7.2316C19.0189 8.33597 19.447 9.59872 19.447 11.0198V18.2111H21.5016V20.2658H5.06445ZM13.283 23.3477C12.718 23.3477 12.2343 23.1465 11.8319 22.7442C11.4296 22.3418 11.2284 21.8581 11.2284 21.2931H15.3377C15.3377 21.8581 15.1365 22.3418 14.7341 22.7442C14.3318 23.1465 13.8481 23.3477 13.283 23.3477ZM9.17374 18.2111H17.3923V11.0198C17.3923 9.88979 16.99 8.9224 16.1852 8.11766C15.3805 7.31293 14.4131 6.91056 13.283 6.91056C12.153 6.91056 11.1856 7.31293 10.3808 8.11766C9.57611 8.9224 9.17374 9.88979 9.17374 11.0198V18.2111Z" fill="black"/>
|
||||
<circle cx="19.4462" cy="19.2384" r="4.23771" fill="#FF0000" stroke="#fff" strokeWidth="2.31148"/>
|
||||
</svg>
|
||||
</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>
|
||||
<DownOutlined style={{ fontSize: '12px' }} />
|
||||
</div>
|
||||
</Space>
|
||||
</a>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section className='container mx-auto my-16'>
|
||||
<div className='grid grid-cols-1 xl:grid-cols-4 gap-y-6 border-[1px] border-[#CFCFCF]'>
|
||||
<div className='xl:col-span-3 border-r-[1px] border-[#CFCFCF]'>
|
||||
<div className=''>
|
||||
<Tabs className='' defaultActiveKey="1" >
|
||||
<TabPane className='' tab="All" key="1">
|
||||
<div className='flex flex-col gap-6'>
|
||||
{knowledgeData.map(data => (
|
||||
<div key={data.id} className='flex flex-row justify-between px-6 place-items-center'>
|
||||
<div className='flex flex-row justify-between gap-6'>
|
||||
<img src={data.img} alt="" />
|
||||
<div className='flex flex-col space-y-3'>
|
||||
<h2 className='text-[16px] font-[700] text-[#000]'>{data.title}</h2>
|
||||
<p className='text-[14px] font-[600] text-[#525252]'>{data.challenge}</p>
|
||||
<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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</TabPane>
|
||||
<TabPane tab="Completed" key="2">
|
||||
<div className='flex flex-col gap-6'>
|
||||
{knowledgeData.map(data => (
|
||||
<div key={data.id} className='flex flex-row justify-between px-6 place-items-center'>
|
||||
<div className='flex flex-row justify-between gap-6'>
|
||||
<img src={data.img} alt="" />
|
||||
<div className='flex flex-col space-y-3'>
|
||||
<h2 className='text-[16px] font-[700] text-[#000]'>{data.title}</h2>
|
||||
<p className='text-[14px] font-[600] text-[#525252]'>{data.challenge}</p>
|
||||
<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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
{/* <h2 className='text-[20px] font-[700] inline-flex p-6'>Knowledge Quests <img src="../../assets/right-arrow.svg" alt="" /></h2> */}
|
||||
</div>
|
||||
<div className='xl:col-span-1'>
|
||||
<h2 className='text-[20px] font-[700] inline-flex px-4 pt-4'>Top Performers <img src="../../assets/right-arrow.svg" alt="" /></h2>
|
||||
<p className='text-[16px] font-[700] text-[#6E6E6E] px-4 pb-4 mb-28'>Knowledge Quest</p>
|
||||
<div className='flex flex-row justify-between place-items-center space-x-2 border-b-[1px] border-[#CFCFCF]'>
|
||||
<div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||
<img className='mx-auto h-[52px] w-[60px] ' src={secondHighestRank.avatar} alt="" />
|
||||
<img className='absolute mt-12' src="../../assets/bacth2.svg" alt="" />
|
||||
</div>
|
||||
<p className='text-[12px] font-[700] text-center mt-4'>{secondHighestRank.name}</p>
|
||||
<p className='text-[12px] font-[700] text-center'>{secondHighestRank.score}</p>
|
||||
</div>
|
||||
<div className='w-full mx-auto h-[130px] -mt-[42px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||
<img className='-mt-10' src="../../assets/crown.png" alt="" />
|
||||
<img className='mx-auto h-[52px] w-[60px]' src={highestRank.avatar} alt="" />
|
||||
<img className='absolute mt-12' src="../../assets/bacth1.svg" alt="" />
|
||||
</div>
|
||||
<p className='text-[12px] font-[700] text-center mt-4'>{highestRank.name}</p>
|
||||
<p className='text-[12px] font-[700] text-center'>{highestRank.score}</p>
|
||||
</div>
|
||||
<div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
|
||||
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
|
||||
<img className='mx-auto h-[52px] w-[60px]' src={thirdHighestRank.avatar} alt="" />
|
||||
<img className='absolute mt-12' src="../../assets/bacth3.svg" alt="" />
|
||||
</div>
|
||||
<p className='text-[12px] font-[700] text-center mt-4'>{thirdHighestRank.name}</p>
|
||||
<p className='text-[12px] font-[700] text-center'>{thirdHighestRank.score}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
{sortedData.slice(3).map(data => (
|
||||
<div className='flex flex-row justify-between place-items-center border-b-[1px] border-[#CFCFCF] p-2'>
|
||||
<p className='text-[11px] font-[700]'># {data.rank}</p>
|
||||
<img className='w-[35px] h-[35px]' src={data.avatar} alt="" />
|
||||
<div>
|
||||
<p className='text-[14px] font-[700]'>{data.name}</p>
|
||||
<p className='text-[10px] font-[700] text-[#6E6E6E]'>{data.program}</p>
|
||||
</div>
|
||||
<div className='flex flex-col justify-center place-items-center'>
|
||||
<img src="../../assets/points-icon.svg" alt="" />
|
||||
<p className='text-[10px] font-[700]'>{data.points} Points</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
export default App;
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "remix vite:build",
|
||||
"dev": "remix vite:dev",
|
||||
"dev": "remix vite:dev --host 0.0.0.0",
|
||||
"lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
|
||||
"start": "remix-serve ./build/server/index.js",
|
||||
"typecheck": "tsc"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.7362 20.4259C15.7791 20.4259 10.9677 15.5954 10.9677 9.65747C10.9677 15.5954 6.13715 20.4259 0.199219 20.4259C6.13715 20.4259 10.9677 25.2374 10.9677 31.1753C10.9677 25.2374 15.7791 20.4259 21.7362 20.4259Z" fill="#FFD93B"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.7897 25.9824C29.5248 25.9824 26.89 23.3285 26.89 20.0826C26.89 23.3285 24.236 25.9824 20.9902 25.9824C24.236 25.9824 26.89 28.6172 26.89 31.8821C26.89 28.6172 29.5248 25.9824 32.7897 25.9824ZM29.3912 8.03494C25.4198 8.03494 22.2122 4.82731 22.2122 0.855957C22.2122 4.82731 19.0046 8.03494 15.0332 8.03494C19.0046 8.03494 22.2122 11.2426 22.2122 15.2139C22.2122 11.2426 25.4198 8.03494 29.3912 8.03494Z" fill="#FFB030"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 854 B |
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
|
||||
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="0.540776" width="12.545" height="12.545" rx="3.4833" transform="matrix(0.715495 0.698618 -0.715495 0.698618 8.63497 -0.511702)" fill="#FCF6B7" stroke="url(#paint0_linear_173_10044)" stroke-width="0.774066"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_173_10044" x1="6.65951" y1="0" x2="6.65951" y2="13.319" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#AA771C"/>
|
||||
<stop offset="0.149" stop-color="#B3872F"/>
|
||||
<stop offset="0.284" stop-color="#BF953F"/>
|
||||
<stop offset="0.399" stop-color="#E2BD56"/>
|
||||
<stop offset="0.544" stop-color="#EBCB66"/>
|
||||
<stop offset="0.664" stop-color="#FFEFA1"/>
|
||||
<stop offset="0.774" stop-color="#F0D06B"/>
|
||||
<stop offset="0.859" stop-color="#D5A73F"/>
|
||||
<stop offset="1" stop-color="#C49628"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 933 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -0,0 +1,14 @@
|
|||
|
||||
<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="0.513508" width="13.2522" height="13.2522" rx="3.4833" transform="matrix(0.748274 0.66339 -0.748274 0.66339 9.96432 -0.926697)" fill="url(#paint0_linear_173_10051)" stroke="url(#paint1_linear_173_10051)" stroke-width="0.774066"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_173_10051" x1="7.01315" y1="0" x2="12.2363" y2="12.6952" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFE1C5"/>
|
||||
<stop offset="1" stop-color="#FBC898"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_173_10051" x1="7.01315" y1="0" x2="12.2363" y2="12.6952" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFE1C5"/>
|
||||
<stop offset="1" stop-color="#FBC898"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 778 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,115 @@
|
|||
|
||||
|
||||
.ant-menu-light .ant-menu-item-selected{
|
||||
color: #ED9545;
|
||||
border-left: 3px solid #ED9545 ;
|
||||
background: transparent;
|
||||
}
|
||||
/* App.css */
|
||||
.custom-menu .ant-menu-item{
|
||||
border-radius: 0; /* Remove border-radius */
|
||||
color: #6E6E6E;
|
||||
}
|
||||
|
||||
:where(.css-dev-only-do-not-override-1uq9j6g).ant-menu-light .ant-menu-item a, :where(.css-dev-only-do-not-override-1uq9j6g).ant-menu-light>.ant-menu .ant-menu-item a, :where(.css-dev-only-do-not-override-1uq9j6g).ant-menu-light .ant-menu-item a:hover, :where(.css-dev-only-do-not-override-1uq9j6g).ant-menu-light>.ant-menu .ant-menu-item a:hover{
|
||||
color: #6E6E6E;
|
||||
}
|
||||
|
||||
|
||||
/* Specific styling for parent menu items (non-selected) */
|
||||
.custom-menu .ant-menu-submenu-title {
|
||||
border-bottom: 1px solid #CFCFCF; /* Default border color for parent items */
|
||||
border-radius: 0; /* Remove border-radius for parent items */
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
--icon-color: #000; /* Default icon color */
|
||||
}
|
||||
|
||||
/* Specific styling for selected parent menu items */
|
||||
.custom-menu .ant-menu-submenu-selected .ant-menu-submenu-title,
|
||||
.custom-menu .ant-menu-submenu-title.ant-menu-submenu-title-selected,
|
||||
.custom-menu .ant-menu-submenu-title .ant-menu-submenu-open {
|
||||
color: #ED9545; /* Selected text color for parent items */
|
||||
border-bottom: 1px solid #CFCFCF; /* Selected border color for parent items */
|
||||
--icon-color: #ED9545; /* Selected icon color */
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Ensure parent item remains #ED9545 when any child is selected */
|
||||
.custom-menu .ant-menu-submenu-open > .ant-menu-submenu-title {
|
||||
color: #ED9545; /* Ensure parent item text color */
|
||||
border-bottom: 1px solid #CFCFCF; /* Ensure parent item border color */
|
||||
--icon-color: #ED9545; /* Ensure parent item icon color */
|
||||
}
|
||||
|
||||
/* Ensure parent item text color reverts to #000 when submenu is collapsed */
|
||||
.custom-menu .ant-menu-submenu-closed > .ant-menu-submenu-title {
|
||||
color: #000; /* Ensure parent item text color */
|
||||
--icon-color: #000; /* Ensure parent item icon color */
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* For Custom Scrollbar */
|
||||
|
||||
/* Custom scrollbar for WebKit browsers */
|
||||
::-webkit-scrollbar {
|
||||
width: 3px; /* Width of the scrollbar */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #fcfcfc; /* Track background */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #CFCFCF; /* Scrollbar color */
|
||||
border-radius: 10px; /* Rounded corners */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555; /* Color when hovering */
|
||||
}
|
||||
/* Firefox scrollbar styling */
|
||||
|
||||
.custom-gradient-border {
|
||||
border: 4.32px solid transparent;
|
||||
border-image-source: linear-gradient(159.09deg, #FFFFFF 13.82%, rgba(0, 0, 0, 0) 97.01%);
|
||||
border-image-slice: 1;
|
||||
border-radius: 8px; /* Adjust as needed */
|
||||
}
|
||||
.ant-tabs-nav {
|
||||
border-bottom: none;
|
||||
color: #EF7A0C;
|
||||
}
|
||||
|
||||
/* Optional: Style the tab bar ink */
|
||||
.ant-tabs-ink-bar {
|
||||
background-color: #000;
|
||||
color: #EF7A0C;
|
||||
}
|
||||
|
||||
:where(.css-dev-only-do-not-override-1uq9j6g).ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn{
|
||||
color: #EF7A0C;
|
||||
}
|
||||
|
||||
:where(.css-dev-only-do-not-override-1uq9j6g).ant-tabs .ant-tabs-tab {
|
||||
color: #9D9D9D;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
padding: 15px 20px;
|
||||
|
||||
}
|
||||
:where(.css-dev-only-do-not-override-1uq9j6g).ant-tabs .ant-tabs-tab:hover{
|
||||
color: #EF7A0C;
|
||||
}
|
||||
|
||||
.ant-tabs-tab.ant-tabs-tab-active {
|
||||
border-bottom: 4px solid #EF7A0C;
|
||||
width: 70px;
|
||||
z-index: 2;
|
||||
justify-content: center;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.3652 21.5568C17.2678 21.5568 22.0527 16.7718 22.0527 10.8693C22.0527 4.96672 17.2678 0.181763 11.3652 0.181763C5.46269 0.181763 0.677734 4.96672 0.677734 10.8693C0.677734 16.7718 5.46269 21.5568 11.3652 21.5568Z" fill="#FEDA2C"/>
|
||||
<path d="M11.3657 19.108C15.9158 19.108 19.6045 15.4194 19.6045 10.8692C19.6045 6.31911 15.9158 2.63049 11.3657 2.63049C6.81557 2.63049 3.12695 6.31911 3.12695 10.8692C3.12695 15.4194 6.81557 19.108 11.3657 19.108Z" fill="#FCAA17"/>
|
||||
<path d="M11.3661 4.53772L13.2398 8.33422L17.4293 8.94303L14.3978 11.8982L15.1135 16.0708L11.3661 14.1008L7.61873 16.0708L8.33442 11.8982L5.30273 8.94303L9.49242 8.33422L11.3661 4.53772Z" fill="#FEDA2C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 785 B |
|
|
@ -0,0 +1,83 @@
|
|||
|
||||
|
||||
.ant-menu-light .ant-menu-item-selected{
|
||||
color: #ED9545;
|
||||
border-left: 3px solid #ED9545 ;
|
||||
background: transparent;
|
||||
}
|
||||
/* App.css */
|
||||
.custom-menu .ant-menu-item{
|
||||
border-radius: 0; /* Remove border-radius */
|
||||
color: #6E6E6E;
|
||||
}
|
||||
|
||||
:where(.css-dev-only-do-not-override-1uq9j6g).ant-menu-light .ant-menu-item a, :where(.css-dev-only-do-not-override-1uq9j6g).ant-menu-light>.ant-menu .ant-menu-item a, :where(.css-dev-only-do-not-override-1uq9j6g).ant-menu-light .ant-menu-item a:hover, :where(.css-dev-only-do-not-override-1uq9j6g).ant-menu-light>.ant-menu .ant-menu-item a:hover{
|
||||
color: #6E6E6E;
|
||||
}
|
||||
|
||||
|
||||
/* Specific styling for parent menu items (non-selected) */
|
||||
.custom-menu .ant-menu-submenu-title {
|
||||
border-bottom: 1px solid #CFCFCF; /* Default border color for parent items */
|
||||
border-radius: 0; /* Remove border-radius for parent items */
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
--icon-color: #000; /* Default icon color */
|
||||
}
|
||||
|
||||
/* Specific styling for selected parent menu items */
|
||||
.custom-menu .ant-menu-submenu-selected .ant-menu-submenu-title,
|
||||
.custom-menu .ant-menu-submenu-title.ant-menu-submenu-title-selected,
|
||||
.custom-menu .ant-menu-submenu-title .ant-menu-submenu-open {
|
||||
color: #ED9545; /* Selected text color for parent items */
|
||||
border-bottom: 1px solid #CFCFCF; /* Selected border color for parent items */
|
||||
--icon-color: #ED9545; /* Selected icon color */
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Ensure parent item remains #ED9545 when any child is selected */
|
||||
.custom-menu .ant-menu-submenu-open > .ant-menu-submenu-title {
|
||||
color: #ED9545; /* Ensure parent item text color */
|
||||
border-bottom: 1px solid #CFCFCF; /* Ensure parent item border color */
|
||||
--icon-color: #ED9545; /* Ensure parent item icon color */
|
||||
}
|
||||
|
||||
/* Ensure parent item text color reverts to #000 when submenu is collapsed */
|
||||
.custom-menu .ant-menu-submenu-closed > .ant-menu-submenu-title {
|
||||
color: #000; /* Ensure parent item text color */
|
||||
--icon-color: #000; /* Ensure parent item icon color */
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* For Custom Scrollbar */
|
||||
|
||||
/* Custom scrollbar for WebKit browsers */
|
||||
::-webkit-scrollbar {
|
||||
width: 3px; /* Width of the scrollbar */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #fcfcfc; /* Track background */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #CFCFCF; /* Scrollbar color */
|
||||
border-radius: 10px; /* Rounded corners */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555; /* Color when hovering */
|
||||
}
|
||||
/* Firefox scrollbar styling */
|
||||
|
||||
.custom-gradient-border {
|
||||
border: 4.32px solid transparent;
|
||||
border-image-source: linear-gradient(159.09deg, #FFFFFF 13.82%, rgba(0, 0, 0, 0) 97.01%);
|
||||
border-image-slice: 1;
|
||||
border-radius: 8px; /* Adjust as needed */
|
||||
}
|
||||
Loading…
Reference in New Issue