dwd-projects
/
bs-p2
generated from dwd/boilarplate-remix-tailwind-antd
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

s1

page3
Suvodip 2024-07-26 14:08:00 +05:30
parent 59c6326cf0
commit e155a1b997
11 changed files with 1254 additions and 331 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
app/components/KnowledgeQuest.tsx
View File

@ -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';
@ -216,7 +216,7 @@ let performersData = [
points: "999",
rank: "1",
program: "Graduate Program",
avatar: "../../assets/avatar1.png"
avatar: "avatar1.png"
},
{
id: "2",
@ -225,7 +225,7 @@ let performersData = [
points: "997",
rank: "2",
program: "Graduate Program",
avatar: "../../assets/avatar2.png"
avatar: "avatar2.png"
},
{
id: "3",
@ -234,7 +234,7 @@ let performersData = [
points: "994",
rank: "3",
program: "Graduate Program",
avatar: "../../assets/avatar3.png"
avatar: "avatar3.png"
},
{
id: "4",
@ -243,7 +243,7 @@ let performersData = [
points: "990",
rank: "4",
program: "Graduate Program",
avatar: "../../assets/avatar4.png"
avatar: "avatar4.png"
},
{
id: "5",
@ -252,7 +252,7 @@ let performersData = [
points: "987",
rank: "5",
program: "Graduate Program",
avatar: "../../assets/avatar5.png"
avatar: "avatar5.png"
},
{
id: "6",
@ -261,7 +261,7 @@ let performersData = [
points: "982",
rank: "6",
program: "Graduate Program",
avatar: "../../assets/avatar6.png"
avatar: "avatar6.png"
},
{
id: "7",
@ -270,7 +270,7 @@ let performersData = [
points: "980",
rank: "7",
program: "Graduate Program",
avatar: "../../assets/avatar1.png"
avatar: "avatar1.png"
},
{
id: "8",
@ -279,7 +279,7 @@ let performersData = [
points: "978",
rank: "8",
program: "Graduate Program",
avatar: "../../assets/avatar2.png"
avatar: "avatar2.png"
},
{
id: "9",
@ -288,7 +288,7 @@ let performersData = [
points: "975",
rank: "9",
program: "Graduate Program",
avatar: "../../assets/avatar3.png"
avatar: "avatar3.png"
},
{
id: "10",
@ -297,7 +297,7 @@ let performersData = [
points: "972",
rank: "10",
program: "Graduate Program",
avatar: "../../assets/avatar4.png"
avatar: "avatar4.png"
},
{
id: "11",
@ -306,7 +306,7 @@ let performersData = [
points: "970",
rank: "11",
program: "Graduate Program",
avatar: "../../assets/avatar5.png"
avatar: "avatar5.png"
},
{
id: "12",
@ -315,7 +315,7 @@ let performersData = [
points: "968",
rank: "12",
program: "Graduate Program",
avatar: "../../assets/avatar6.png"
avatar: "avatar6.png"
},
{
id: "13",
@ -324,7 +324,7 @@ let performersData = [
points: "965",
rank: "13",
program: "Graduate Program",
avatar: "../../assets/avatar1.png"
avatar: "avatar1.png"
},
{
id: "14",
@ -333,7 +333,7 @@ let performersData = [
points: "962",
rank: "14",
program: "Graduate Program",
avatar: "../../assets/avatar2.png"
avatar: "avatar2.png"
},
{
id: "15",
@ -342,7 +342,7 @@ let performersData = [
points: "960",
rank: "15",
program: "Graduate Program",
avatar: "../../assets/avatar3.png"
avatar: "avatar3.png"
},
{
id: "16",
@ -351,7 +351,7 @@ let performersData = [
points: "957",
rank: "16",
program: "Graduate Program",
avatar: "../../assets/avatar4.png"
avatar: "avatar4.png"
},
{
id: "17",
@ -360,7 +360,7 @@ let performersData = [
points: "955",
rank: "17",
program: "Graduate Program",
avatar: "../../assets/avatar5.png"
avatar: "avatar5.png"
},
{
id: "18",
@ -369,7 +369,7 @@ let performersData = [
points: "953",
rank: "18",
program: "Graduate Program",
avatar: "../../assets/avatar6.png"
avatar: "avatar6.png"
},
{
id: "19",
@ -378,7 +378,7 @@ let performersData = [
points: "950",
rank: "19",
program: "Graduate Program",
avatar: "../../assets/avatar1.png"
avatar: "avatar1.png"
},
{
id: "20",
@ -387,7 +387,7 @@ let performersData = [
points: "947",
rank: "20",
program: "Graduate Program",
avatar: "../../assets/avatar2.png"
avatar: "avatar2.png"
},
{
id: "21",
@ -396,7 +396,7 @@ let performersData = [
points: "945",
rank: "21",
program: "Graduate Program",
avatar: "../../assets/avatar3.png"
avatar: "avatar3.png"
}
];
@ -429,92 +429,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>),
},
],
@ -527,17 +527,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>)
},
@ -611,7 +611,7 @@ const App: React.FC = () => {
<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>
@ -637,7 +637,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>

39
app/components/StudentDashboard.tsx
View File

@ -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';
@ -69,7 +69,7 @@ let performersData = [
points: "999",
rank: "1",
program: "Graduate Program",
avatar: "../../assets/avatar1.png"
avatar: "avatar1.png"
},
{
id: "2",
@ -78,7 +78,7 @@ let performersData = [
points: "997",
rank: "2",
program: "Graduate Program",
avatar: "../../assets/avatar2.png"
avatar: "avatar2.png"
},
{
id: "3",
@ -87,7 +87,7 @@ let performersData = [
points: "994",
rank: "3",
program: "Graduate Program",
avatar: "../../assets/avatar3.png"
avatar: "avatar3.png"
},
{
id: "4",
@ -96,7 +96,7 @@ let performersData = [
points: "990",
rank: "4",
program: "Graduate Program",
avatar: "../../assets/avatar4.png"
avatar: "avatar4.png"
},
{
id: "5",
@ -105,7 +105,7 @@ let performersData = [
points: "987",
rank: "5",
program: "Graduate Program",
avatar: "../../assets/avatar5.png"
avatar: "avatar5.png"
},
{
id: "6",
@ -114,7 +114,7 @@ let performersData = [
points: "982",
rank: "6",
program: "Graduate Program",
avatar: "../../assets/avatar6.png"
avatar: "avatar6.png"
}
];
@ -148,7 +148,7 @@ const items2: MenuProps['items'] = [
{
key: 'subsd1',
icon: <AdministrationIcon />,
label: 'Administration',
label: (<p>&nbsp; Administration</p>),
children: [
{
key: '1sd',
@ -167,7 +167,7 @@ const items2: MenuProps['items'] = [
{
key: 'subsd2',
icon: <MyCoursesIcon />,
label: 'My Courses',
label: (<p>&nbsp; My Courses</p>),
children: [
{
key: '4sd',
@ -182,7 +182,7 @@ const items2: MenuProps['items'] = [
{
key: 'subsd3',
icon: <ExaminationIcon />,
label: 'Examinations',
label: (<p>&nbsp; Examinations</p>),
children: [
{
key: '6sd',
@ -201,7 +201,7 @@ const items2: MenuProps['items'] = [
{
key: 'subsd4',
icon: <CommunityIcon />,
label: 'Community',
label: (<p>&nbsp; Community</p>),
children: [
{
key: '9sd',
@ -220,7 +220,7 @@ const items2: MenuProps['items'] = [
{
key: 'subsd5',
icon: <NotificationIcon />,
label: 'Notifications',
label: (<p>&nbsp; Notifications</p>),
children: [
{
key: '12sd',
@ -299,7 +299,6 @@ const App: React.FC = () => {
const { token: { colorBgContainer}, } = theme.useToken();
return (
<Layout>
<>
{/* <Button type="primary" onClick={showLoading}>Open Modal</Button> */}
@ -319,14 +318,6 @@ const App: React.FC = () => {
<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} />
@ -336,7 +327,7 @@ const App: React.FC = () => {
<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-8'>
<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>
@ -359,7 +350,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>
@ -442,7 +433,7 @@ const App: React.FC = () => {
</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'>
<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>

3
app/routes/ai-quiz.tsx
View File

@ -34,7 +34,6 @@ function toggleSection() {
}
}
export default function Index() {
const [percent, setPercent] = useState(0);
const [secondsLeft, setSecondsLeft] = useState(5);
@ -75,7 +74,7 @@ export default function Index() {
<div className="flex flex-col">
<div className="flex flex-row justify-between place-items-center">
<label className="text-[18px] font-[500] my-4" htmlFor="textToUse">Text to Use</label>
<p className="text-[16px] font-[500] text-[#9D9D9D]"><span id="letterLength"></span>0<span>/2000</span></p>
<p className="text-[16px] font-[500] text-[#9D9D9D]"><span id="letterLength"></span><span>/2000</span></p>
</div>
<textarea onChange={letterCount} name="queryMessage" id="queryMessage" rows="6" maxLength="200" className="focus:outline-none border-[1px] border-[#CFCFCF] rounded-[8px] p-6" placeholder="Enter the topic you’d like to generate a quiz for."></textarea>
</div>

403
app/routes/classmate-directory.tsx Normal file
View File

@ -0,0 +1,403 @@
import React, {useState} from 'react';
import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} 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, Breadcrumb, Dropdown, Space} from 'antd';
import '../../public/assets/student-dashboard.css';
let classmatesData = [
{
id: "1",
name: "Daniel Nguyen",
program: "Graduate Program",
type: "Student",
avatar: "avatar1.png"
},
{
id: "2",
name: "Sarah Anderson",
program: "Post-Graduate Program",
type: "Student",
avatar: "avatar2.png"
},
{
id: "3",
name: "John Smith",
program: "Undergraduate Program",
type: "Student",
avatar: "avatar3.png"
},
{
id: "4",
name: "Emily Davis",
program: "Graduate Program",
type: "Student",
avatar: "avatar4.png"
},
{
id: "5",
name: "Michael Johnson",
program: "Post-Graduate Program",
type: "Student",
avatar: "avatar5.png"
},
{
id: "6",
name: "Jessica Wilson",
program: "Undergraduate Program",
type: "Student",
avatar: "avatar6.png"
},
{
id: "7",
name: "David Brown",
program: "Graduate Program",
type: "Student",
avatar: "avatar1.png"
},
{
id: "8",
name: "Laura Lee",
program: "Post-Graduate Program",
type: "Student",
avatar: "avatar2.png"
},
{
id: "9",
name: "Chris Miller",
program: "Undergraduate Program",
type: "Student",
avatar: "avatar3.png"
},
{
id: "10",
name: "Sophia Taylor",
program: "Graduate Program",
type: "Student",
avatar: "avatar4.png"
},
{
id: "11",
name: "James Anderson",
program: "Post-Graduate Program",
type: "Student",
avatar: "avatar5.png"
},
{
id: "12",
name: "Olivia Thomas",
program: "Undergraduate Program",
type: "Student",
avatar: "avatar6.png"
},
{
id: "13",
name: "Ethan Martinez",
program: "Graduate Program",
type: "Student",
avatar: "avatar1.png"
},
{
id: "14",
name: "Ava Garcia",
program: "Post-Graduate Program",
type: "Student",
avatar: "avatar2.png"
},
{
id: "15",
name: "Noah Rodriguez",
program: "Undergraduate Program",
type: "Student",
avatar: "avatar3.png"
},
{
id: "16",
name: "Mia Martinez",
program: "Graduate Program",
type: "Student",
avatar: "avatar4.png"
},
{
id: "17",
name: "Lucas Wilson",
program: "Post-Graduate Program",
type: "Student",
avatar: "avatar5.png"
},
{
id: "18",
name: "Isabella Clark",
program: "Undergraduate Program",
type: "Student",
avatar: "avatar6.png"
},
{
id: "19",
name: "Liam Walker",
program: "Graduate Program",
type: "Student",
avatar: "avatar1.png"
},
{
id: "20",
name: "Charlotte Lewis",
program: "Post-Graduate Program",
type: "Student",
avatar: "avatar2.png"
}
];
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>
</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='py-2'>
<div className='container mx-auto flex flex-row justify-between pr-10'>
<div className='inline-flex justify-center place-items-center'>
<Breadcrumb separator=">" items={[{title: <a href="">Administration</a>,},{title: 'Class Directory',},]}/>
</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>
<RightOutlined style={{ fontSize: '12px', paddingRight: '10px' }} />
</div>
</Space>
</a>
</Dropdown>
</div>
</div>
</div>
<section className='container mx-auto '>
<div className='grid gridcols-1 md:grid-cols-7 border-[1px] border-[#CFCFCF]'>
<div className='col-span-5 border-r-[1px] border-[#CFCFCF]'>
<p className='text-[18px] font-[700] text-[#525252] border-b-[1px] border-[#CFCFCF] py-5 pl-5'><span>Your Classmates </span>| <span>Graduate Program</span></p>
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
{classmatesData.map(data => (
<div key={data.id} className='w-60 h-60 bg-cover bg-center' style={{ backgroundImage: `url('../../assets/${data.avatar}')` }}>
<img className='w-[60px] h-[60px]' src={`../../assets/${data.avatar}`} alt="" />
</div>
))}
</div>
</div>
<div className='col-span-2'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dignissimos nostrum fugit animi nobis. Explicabo nam accusamus harum doloremque praesentium officia, vel laborum nobis eveniet quibusdam ex rem asperiores alias!</div>
</div>
</section>
</Content>
</Layout>
</Layout>
</Layout>
);
};
export default App;

237
app/routes/quiz.tsx
View File

@ -3,144 +3,142 @@ import { useState, useEffect } from 'react';
// Sample questions JSON data
const questionsData = [
{
"id": 1,
"question": "What is the capital of France?",
"options": ["Berlin", "Madrid", "Paris", "Rome"],
"answer": "Paris"
id: 1,
question: "What is the capital of France?",
options: ["Berlin", "Madrid", "Paris", "Rome"],
answer: "Paris",
},
{
"id": 2,
"question": "Which planet is known as the Red Planet?",
"options": ["Earth", "Mars", "Jupiter", "Saturn"],
"answer": "Mars"
id: 2,
question: "Which planet is known as the Red Planet?",
options: ["Earth", "Mars", "Jupiter", "Saturn"],
answer: "Mars",
},
{
"id": 3,
"question": "What is the chemical symbol for gold?",
"options": ["Au", "Ag", "Pb", "Fe"],
"answer": "Au"
id: 3,
question: "What is the chemical symbol for gold?",
options: ["Au", "Ag", "Pb", "Fe"],
answer: "Au",
},
{
"id": 4,
"question": "Who wrote 'To Kill a Mockingbird'?",
"options": ["Harper Lee", "Mark Twain", "Ernest Hemingway", "J.K. Rowling"],
"answer": "Harper Lee"
id: 4,
question: "Who wrote 'To Kill a Mockingbird'?",
options: ["Harper Lee", "Mark Twain", "Ernest Hemingway", "J.K. Rowling"],
answer: "Harper Lee",
},
{
"id": 5,
"question": "What is the largest ocean on Earth?",
"options": ["Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean"],
"answer": "Pacific Ocean"
id: 5,
question: "What is the largest ocean on Earth?",
options: ["Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean"],
answer: "Pacific Ocean",
},
{
"id": 6,
"question": "Which element has the atomic number 1?",
"options": ["Helium", "Hydrogen", "Oxygen", "Carbon"],
"answer": "Hydrogen"
id: 6,
question: "Which element has the atomic number 1?",
options: ["Helium", "Hydrogen", "Oxygen", "Carbon"],
answer: "Hydrogen",
},
{
"id": 7,
"question": "In which year did the Titanic sink?",
"options": ["1912", "1905", "1898", "1923"],
"answer": "1912"
id: 7,
question: "In which year did the Titanic sink?",
options: ["1912", "1905", "1898", "1923"],
answer: "1912",
},
{
"id": 8,
"question": "Who is the author of '1984'?",
"options": ["George Orwell", "Aldous Huxley", "Ray Bradbury", "J.D. Salinger"],
"answer": "George Orwell"
id: 8,
question: "Who is the author of '1984'?",
options: ["George Orwell", "Aldous Huxley", "Ray Bradbury", "J.D. Salinger"],
answer: "George Orwell",
},
{
"id": 9,
"question": "What is the hardest natural substance on Earth?",
"options": ["Gold", "Platinum", "Diamond", "Iron"],
"answer": "Diamond"
id: 9,
question: "What is the hardest natural substance on Earth?",
options: ["Gold", "Platinum", "Diamond", "Iron"],
answer: "Diamond",
},
{
"id": 10,
"question": "What is the largest planet in our solar system?",
"options": ["Earth", "Saturn", "Neptune", "Jupiter"],
"answer": "Jupiter"
id: 10,
question: "What is the largest planet in our solar system?",
options: ["Earth", "Saturn", "Neptune", "Jupiter"],
answer: "Jupiter",
},
{
"id": 11,
"question": "What is the main ingredient in guacamole?",
"options": ["Tomato", "Avocado", "Pepper", "Onion"],
"answer": "Avocado"
id: 11,
question: "What is the main ingredient in guacamole?",
options: ["Tomato", "Avocado", "Pepper", "Onion"],
answer: "Avocado",
},
{
"id": 12,
"question": "Which country is known as the Land of the Rising Sun?",
"options": ["China", "Japan", "Thailand", "South Korea"],
"answer": "Japan"
id: 12,
question: "Which country is known as the Land of the Rising Sun?",
options: ["China", "Japan", "Thailand", "South Korea"],
answer: "Japan",
},
{
"id": 13,
"question": "What is the smallest prime number?",
"options": ["1", "2", "3", "5"],
"answer": "2"
id: 13,
question: "What is the smallest prime number?",
options: ["1", "2", "3", "5"],
answer: "2",
},
{
"id": 14,
"question": "Who painted the Mona Lisa?",
"options": ["Vincent van Gogh", "Leonardo da Vinci", "Pablo Picasso", "Claude Monet"],
"answer": "Leonardo da Vinci"
id: 14,
question: "Who painted the Mona Lisa?",
options: ["Vincent van Gogh", "Leonardo da Vinci", "Pablo Picasso", "Claude Monet"],
answer: "Leonardo da Vinci",
},
{
"id": 15,
"question": "What is the capital city of Australia?",
"options": ["Sydney", "Melbourne", "Canberra", "Brisbane"],
"answer": "Canberra"
id: 15,
question: "What is the capital city of Australia?",
options: ["Sydney", "Melbourne", "Canberra", "Brisbane"],
answer: "Canberra",
},
{
"id": 16,
"question": "Which gas do plants primarily use for photosynthesis?",
"options": ["Oxygen", "Nitrogen", "Carbon Dioxide", "Hydrogen"],
"answer": "Carbon Dioxide"
id: 16,
question: "Which gas do plants primarily use for photosynthesis?",
options: ["Oxygen", "Nitrogen", "Carbon Dioxide", "Hydrogen"],
answer: "Carbon Dioxide",
},
{
"id": 17,
"question": "What is the boiling point of water in Celsius?",
"options": ["90°C", "100°C", "110°C", "120°C"],
"answer": "100°C"
id: 17,
question: "What is the boiling point of water in Celsius?",
options: ["90°C", "100°C", "110°C", "120°C"],
answer: "100°C",
},
{
"id": 18,
"question": "Which language is primarily spoken in Brazil?",
"options": ["Spanish", "Portuguese", "French", "English"],
"answer": "Portuguese"
id: 18,
question: "Which language is primarily spoken in Brazil?",
options: ["Spanish", "Portuguese", "French", "English"],
answer: "Portuguese",
},
{
"id": 19,
"question": "What is the smallest unit of life?",
"options": ["Tissue", "Organ", "Cell", "Organism"],
"answer": "Cell"
id: 19,
question: "What is the smallest unit of life?",
options: ["Tissue", "Organ", "Cell", "Organism"],
answer: "Cell",
},
{
"id": 20,
"question": "Who developed the theory of relativity?",
"options": ["Isaac Newton", "Galileo Galilei", "Albert Einstein", "Niels Bohr"],
"answer": "Albert Einstein"
id: 20,
question: "Who developed the theory of relativity?",
options: ["Isaac Newton", "Galileo Galilei", "Albert Einstein", "Niels Bohr"],
answer: "Albert Einstein",
},
{
"id": 21,
"question": "In what year did World War II end?",
"options": ["1945", "1944", "1946", "1943"],
"answer": "1945"
}
id: 21,
question: "In what year did World War II end?",
options: ["1945", "1944", "1946", "1943"],
answer: "1945",
},
];
export default function Index() {
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
const [timeRemaining, setTimeRemaining] = useState(60); // 60 seconds countdown
const [intervalId, setIntervalId] = useState<NodeJS.Timeout | null>(null);
const [selectedAnswers, setSelectedAnswers] = useState<{ [key: number]: string }>({});
const [answeredQuestions, setAnsweredQuestions] = useState<{ id: number; selectedOption: string }[]>([]);
useEffect(() => {
// Start the countdown timer
const id = setInterval(() => {
setTimeRemaining(prevTime => {
setTimeRemaining((prevTime) => {
if (prevTime <= 1) {
clearInterval(id);
return 0;
@ -149,25 +147,33 @@ export default function Index() {
});
}, 1000);
setIntervalId(id);
// Clear interval on component unmount
return () => {
if (intervalId) {
clearInterval(intervalId);
}
clearInterval(id);
};
}, [intervalId]);
}, []);
const handleNextQuestion = () => {
setCurrentQuestionIndex(prevIndex => (prevIndex + 1) % questionsData.length);
if (selectedAnswers[currentQuestion.id]) {
setAnsweredQuestions((prev) => [
...prev,
{ id: currentQuestion.id, selectedOption: selectedAnswers[currentQuestion.id] },
]);
}
setCurrentQuestionIndex((prevIndex) => (prevIndex + 1) % questionsData.length);
};
const handleAnswerChange = (questionId: number, selectedOption: string) => {
setSelectedAnswers((prevAnswers) => ({
...prevAnswers,
[questionId]: selectedOption,
}));
};
const currentQuestion = questionsData[currentQuestionIndex];
return (
<>
<section className='container-fluid bg-[#000] '>
<section className="container-fluid bg-[#000] ">
<div className="flex flex-row justify-center gap-x-8 py-6">
<p className="text-[42px] w-[42px] h-[31px]">✨</p>
<div className="flex flex-col justify-center place-items-center">
@ -176,31 +182,34 @@ export default function Index() {
</div>
</div>
</section>
<div className='mt-[100px]'>
{/* this div for margin top */}
</div>
<div className='container mx-auto max-w-[890px]'>
<p className='flex justify-end text-[20px] font-[600]'>Time remaining: {timeRemaining} seconds</p>
</div>
<section id="" className="container mx-auto max-w-[890px] shadow-xl rounded-xl px-10 py-8 mb-8 border-[1px] border-[#DCDCDC] rounded-[10px] bg-[#FCFCFC]" >
<div className="mt-[100px]">{/* this div for margin top */}</div>
<div className="container mx-auto max-w-[890px]">
<p className="flex justify-end text-[20px] font-[600]">Time remaining: {timeRemaining} seconds</p>
</div>
<section id="" className="container mx-auto max-w-[890px] shadow-xl rounded-xl px-10 py-8 mb-8 border-[1px] border-[#DCDCDC] rounded-[10px] bg-[#FCFCFC]">
<div>
<h2 className="text-[32px] font-[700]">{`Q${currentQuestion.id}. ${currentQuestion.question}`}</h2>
<div className="flex flex-col space-y-4 mt-8">
{currentQuestion.options.map((option, index) => (
<div key={index} className='border-[1px] border-[#D3D3D3] rounded-[10px] p-3 bg-[#FFF]'>
<label className='text-[18px] font-[600]' htmlFor={`question${currentQuestion.id}_${index}`}>
<input type="radio" name={`question${currentQuestion.id}`} id={`question${currentQuestion.id}_${index}`} />
&nbsp;&nbsp;{option}
</label>
<div key={index} className={`border-[1px] ${selectedAnswers[currentQuestion.id] === option ? 'border-[#000]' : 'border-[#D3D3D3]'} rounded-[10px] p-3 bg-[#FFF]`}>
<label className="text-[18px] font-[600]" htmlFor={`question${currentQuestion.id}_${index}`}>
<input type="radio" name={`question${currentQuestion.id}`} id={`question${currentQuestion.id}_${index}`} checked={selectedAnswers[currentQuestion.id] === option} onChange={() => handleAnswerChange(currentQuestion.id, option)}/>&nbsp;&nbsp;{option}</label>
</div>
))}
</div>
<div className='flex justify-end'>
<button className="bg-[#000] text-[#FFF] text-[18px] font-[600] rounded-[8px] px-[100px] py-[15px] mt-[50px] " onClick={handleNextQuestion}>Next Question</button>
<div className="flex justify-end">
<button
className="bg-[#000] text-[#FFF] text-[18px] font-[600] rounded-[8px] px-[100px] py-[15px] mt-[50px] "
onClick={handleNextQuestion}
>
Next
</button>
</div>
</div>
</section>
{/* <pre>{JSON.stringify(answeredQuestions, null, 2)}</pre> */}
</>
);
}
}

238
app/routes/result.tsx Normal file
View File

@ -0,0 +1,238 @@
let performersData = [
{
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: "avatar2.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: "avatar4.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: "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"
}
];
export default function Index(){
return(
<>
<section className="container-fluid bg-[#000] ">
<div className="flex flex-row justify-center gap-x-8 py-6">
<p className="text-[42px] w-[42px] h-[31px]">✨</p>
<div className="flex flex-col justify-center place-items-center">
<p className="text-[#FFF] text-[24px] font-[700]"> Take an AI Generative Quiz</p>
<p className="text-[#FFF] text-[16px] font-[400]">Convert any text into an interactive quiz session</p>
</div>
</div>
</section>
<button className="float-right absolute right-0 2xl:right-80 top-32 bg-[#9D9D9D] w-[45px] h-[45px] font-[700] text-[#FFF] text-[20px] rounded-full">&#10005;</button>
<section id="" className="container mx-auto max-w-[890px] shadow-xl rounded-xl py-8 mb-8 rounded-[10px] bg-[#FFF] mt-10">
<div className="flex flex-col justify-center place-items-center space-y-4 px-10">
<img src="../../assets/celebration-icon.png" alt="" />
<p className="text-[24px] font-[700]">You scored 9/10</p>
<p className="text-[20px] font-[500] text-[#525252]">Congratulations on your achievement. </p>
<button className="inline-flex place-items-center text-[20px] font-[600] text-[#FFF] bg-[#000] px-[40px] py-[15px] rounded-[10px]"><img src="../../assets/reload.svg" alt="" />&nbsp; Another Quiz</button>
</div>
<div className="mt-20">
<p className="text-[20px] font-[700] px-[10px] py-3 border-y-[1px] border-[#CFCFCF] ">Top Performers of this Quiz</p>
<div className="flex flex-col">
{performersData.map((result =>
<div key={result.id} className="flex flex-row justify-between place-items-center p-1.5 px-[10px] hover:bg-[#FDF2E7] duration-300">
<div className="flex flex-row space-x-[16px] place-items-center justify-center">
<p className="px-[10px] text-[14px] font-[700]"># {result.rank}</p>
<img className="w-[50px] h-[50px]" src={result.avatar} alt="" />
<div>
<p className="px-[10px] text-[16px] font-[700]">{result.name}</p>
<p className="px-[10px] text-[12px] font-[500] text-[#6E6E6E]">{result.program}</p>
</div>
</div>
<div className="flex flex-col place-items-center justify-center">
<img src="../../assets/batch-icon.svg" alt="" />
<p className="px-[10px] text-[14px] font-[700]">{result.score}</p>
</div>
</div>
))}
</div>
</div>
</section>
</>
)
}

2
app/routes/start-quiz.tsx
View File

@ -12,7 +12,7 @@ export default function Index(){
</section>
<button className="float-right absolute right-0 2xl:right-80 top-32 bg-[#9D9D9D] w-[45px] h-[45px] font-[700] text-[#FFF] text-[20px] rounded-full">&#10005;</button>
<section id="generateQuiz" className="container mx-auto max-w-[894px] shadow-xl rounded-xl px-10 py-8 my-8" >
<section id="" className="container mx-auto max-w-[894px] shadow-xl rounded-xl px-10 py-8 my-8" >
<div className="flex flex-col justify-center place-items-center space-y-3">
<img src="../../assets/image1.png" alt="" />
<p className="text-[32px] font-[600]">Are You Ready to take this Quiz?</p>

368
app/routes/test2.tsx
View File

@ -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';
@ -60,6 +60,150 @@ let knowledgeData = [
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"
}
];
@ -71,7 +215,7 @@ let performersData = [
points: "999",
rank: "1",
program: "Graduate Program",
avatar: "../../assets/avatar1.png"
avatar: "avatar1.png"
},
{
id: "2",
@ -80,7 +224,7 @@ let performersData = [
points: "997",
rank: "2",
program: "Graduate Program",
avatar: "../../assets/avatar2.png"
avatar: "avatar2.png"
},
{
id: "3",
@ -89,7 +233,7 @@ let performersData = [
points: "994",
rank: "3",
program: "Graduate Program",
avatar: "../../assets/avatar3.png"
avatar: "avatar3.png"
},
{
id: "4",
@ -98,7 +242,7 @@ let performersData = [
points: "990",
rank: "4",
program: "Graduate Program",
avatar: "../../assets/avatar4.png"
avatar: "avatar4.png"
},
{
id: "5",
@ -107,7 +251,7 @@ let performersData = [
points: "987",
rank: "5",
program: "Graduate Program",
avatar: "../../assets/avatar5.png"
avatar: "avatar5.png"
},
{
id: "6",
@ -116,7 +260,142 @@ let performersData = [
points: "982",
rank: "6",
program: "Graduate Program",
avatar: "../../assets/avatar6.png"
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"
}
];
@ -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>

12
public/assets/batch-icon.svg Normal file
View File

@ -0,0 +1,12 @@
<svg width="26" height="31" viewBox="0 0 26 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.09838 13.8516L0.546875 26.1948L6.49623 25.6452L9.3757 30.8808L15.9272 18.5375L7.09838 13.8516Z" fill="#E95454"/>
<path d="M7.84845 27.2869C8.03228 26.892 7.84001 26.4202 7.45545 26.2157L7.0784 26.015C6.70135 25.8002 6.55784 25.3228 6.76325 24.9364C6.97147 24.5434 7.46108 24.3933 7.85408 24.6015L8.91957 25.1671C9.24879 25.3416 9.66149 25.2149 9.83125 24.8839L9.85751 24.8332C10.0526 24.5209 9.93724 24.1082 9.61271 23.9365L6.42559 22.2454C6.03729 22.0391 5.84688 21.5692 6.02791 21.1734C6.22769 20.7522 6.7323 20.5862 7.13843 20.8019L10.0948 22.3711C10.424 22.5456 10.8367 22.4189 11.0112 22.0897L11.0281 22.0466L11.0328 22.0372C11.2213 21.692 11.089 21.2587 10.7411 21.0739L9.08278 20.1942C8.69447 19.9878 8.50407 19.5179 8.6879 19.1174C8.88581 18.701 9.3923 18.5302 9.79842 18.746L11.6302 19.7186C11.9726 19.9006 12.3815 19.7486 12.5588 19.4035C12.5616 19.3988 12.5616 19.3988 12.5635 19.3941C12.5663 19.3894 12.5663 19.3894 12.5682 19.3847C12.7548 19.0442 12.6516 18.6203 12.3084 18.4393L10.3321 17.3907C9.9485 17.1871 9.75809 16.7172 9.93912 16.3214C10.1389 15.9003 10.6435 15.7343 11.0496 15.95L15.925 18.5378L9.37354 30.881L7.568 27.5992C7.68431 27.5204 7.78561 27.4229 7.84845 27.2869Z" fill="#ED6362"/>
<path d="M19.3542 13.8516L25.9057 26.1948L19.9564 25.6452L17.0769 30.8808L10.5254 18.5375L19.3542 13.8516Z" fill="#ED6362"/>
<path d="M18.6029 27.2869C18.4191 26.892 18.6114 26.4202 18.9959 26.2158L19.373 26.015C19.75 25.8003 19.8935 25.3228 19.6881 24.9364C19.4799 24.5434 18.9903 24.3933 18.5973 24.6016L17.5318 25.1672C17.2026 25.3416 16.7899 25.215 16.6201 24.8839L16.5939 24.8332C16.3988 24.5209 16.5141 24.1082 16.8387 23.9366L20.0267 22.2445C20.415 22.0382 20.6054 21.5683 20.4244 21.1725C20.2246 20.7513 19.72 20.5853 19.3139 20.801L16.3575 22.3702C16.0283 22.5447 15.6156 22.4181 15.4411 22.0888L15.4243 22.0457L15.4196 22.0363C15.231 21.6911 15.3633 21.2578 15.7113 21.073L17.3695 20.1933C17.7578 19.9869 17.9482 19.517 17.7644 19.1165C17.5665 18.7001 17.06 18.5294 16.6539 18.7451L14.8202 19.7196C14.4779 19.9016 14.0689 19.7496 13.8917 19.4044C13.8888 19.3998 13.8888 19.3998 13.887 19.3951C13.8842 19.3904 13.8842 19.3904 13.8823 19.3857C13.6956 19.0452 13.7988 18.6213 14.1421 18.4402L16.1183 17.3916C16.5019 17.1881 16.6923 16.7182 16.5113 16.3224C16.3115 15.9012 15.8069 15.7352 15.4008 15.951L10.5254 18.5387L17.0769 30.882L18.8824 27.6002C18.7671 27.5204 18.6658 27.4229 18.6029 27.2869Z" fill="#E95454"/>
<path d="M13.226 22.7752C19.2717 22.7752 24.1727 17.8742 24.1727 11.8285C24.1727 5.78284 19.2717 0.881836 13.226 0.881836C7.1803 0.881836 2.2793 5.78284 2.2793 11.8285C2.2793 17.8742 7.1803 22.7752 13.226 22.7752Z" fill="#FFCC5B"/>
<path d="M14.7101 10.5723H7.77311C7.23379 10.5723 6.79108 10.1296 6.79108 9.59026L6.79859 9.52273V9.50772C6.79108 8.93839 7.25536 8.47317 7.82563 8.47317H12.6335C13.2704 8.47317 13.8331 8.00139 13.8707 7.36359C13.9007 6.69672 13.3689 6.13395 12.701 6.13395H7.60803C7.0462 6.13395 6.62601 5.66217 6.63351 5.0994V5.06939C6.62601 4.50756 7.04527 4.03484 7.60803 4.03484H12.9374C13.5668 4.03484 14.1295 3.56306 14.167 2.93276C14.1971 2.25839 13.6652 1.70312 12.9974 1.70312H9.09466C5.11499 3.34358 2.31055 7.25666 2.31055 11.8282C2.31055 16.3997 5.11499 20.3118 9.0956 21.9504H14.0507C14.6801 21.9504 15.2429 21.4786 15.2804 20.8484C15.3104 20.174 14.7786 19.6196 14.1108 19.6196L8.47375 19.6187C7.80875 19.6187 7.27319 19.0625 7.30883 18.3891C7.34165 17.7588 7.90817 17.2851 8.5394 17.2851H10.7248C11.3532 17.2673 11.8606 16.7524 11.8606 16.1193C11.8606 15.4749 11.3363 14.9496 10.691 14.9496H7.37823C6.83892 14.9496 6.39621 14.5079 6.40371 13.9676V13.8851C6.3662 13.3533 6.7939 12.9031 7.32571 12.9031H14.6426C15.2794 12.9031 15.8422 12.4313 15.8797 11.801C15.9097 11.1275 15.377 10.5723 14.7101 10.5723Z" fill="#FDBC4B"/>
<path d="M13.2261 19.6417C8.91719 19.6417 5.41211 16.1356 5.41211 11.8277C5.41211 7.51973 8.91719 4.01465 13.2261 4.01465C17.535 4.01465 21.0401 7.52067 21.0401 11.8286C21.0401 16.1366 17.535 19.6417 13.2261 19.6417Z" fill="#FFDB70"/>
<path opacity="0.2" d="M21.0408 11.8286C21.0408 7.67162 17.7749 4.27159 13.6752 4.03711H12.9473C12.4671 4.03711 12.0385 4.39728 12.0094 4.8775C11.9869 5.39149 12.3921 5.81544 12.9014 5.81544L17.2009 5.81638C17.7083 5.81638 18.1163 6.24033 18.0891 6.75432C18.0638 7.23548 17.6323 7.59659 17.1502 7.59659H15.4835C15.0042 7.61066 14.6169 8.00272 14.6169 8.48576C14.6169 8.97724 15.0174 9.37774 15.5088 9.37774H18.0357C18.4474 9.37774 18.7841 9.7154 18.7785 10.1262V10.1881C18.8066 10.5942 18.4812 10.9366 18.075 10.9366H12.4952C12.0094 10.9366 11.5808 11.2968 11.5517 11.777C11.5292 12.291 11.9344 12.7149 12.4437 12.7149H17.7336C18.1454 12.7149 18.4821 13.0526 18.4821 13.4634L18.4765 13.515V13.5262C18.4821 13.9605 18.1276 14.3151 17.6933 14.3151H14.026C13.5401 14.3151 13.1115 14.6752 13.0824 15.1611C13.0599 15.6694 13.4651 16.099 13.9744 16.099H17.8584C18.287 16.099 18.6069 16.4592 18.6012 16.8878V16.9103C18.6069 17.339 18.287 17.6991 17.8584 17.6991H13.7943C13.3141 17.6991 12.8854 18.0593 12.8563 18.5395C12.8338 19.0545 13.239 19.4775 13.7483 19.4775H14.8204C18.3686 18.7384 21.0408 15.5897 21.0408 11.8286Z" fill="white"/>
<path d="M18.6813 10.0978H14.8807L13.7055 6.48298C13.5545 6.0187 12.897 6.0187 12.746 6.48298L11.5717 10.0978H7.77116C7.2825 10.0978 7.07896 10.7234 7.47477 11.0104L10.5493 13.2446L9.37504 16.8594C9.22403 17.3237 9.75584 17.7101 10.1517 17.4231L13.2262 15.1889L16.3008 17.4231C16.6966 17.7101 17.2284 17.3237 17.0774 16.8594L15.9031 13.2446L18.9777 11.0104C19.3725 10.7234 19.1699 10.0978 18.6813 10.0978Z" fill="#EC9922"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
public/assets/celebration-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

3
public/assets/reload.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="17" height="21" viewBox="0 0 17 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.72561 4.21536V1.42536C8.72561 0.975363 8.18561 0.755363 7.87561 1.07536L4.07561 4.86536C3.87561 5.06536 3.87561 5.37536 4.07561 5.57536L7.86561 9.36536C8.18561 9.67536 8.72561 9.45536 8.72561 9.00536V6.21536C12.4556 6.21536 15.4056 9.63536 14.5856 13.5054C14.1156 15.7754 12.2756 17.6054 10.0156 18.0754C6.44561 18.8254 3.26561 16.3754 2.78561 13.0654C2.74996 12.8303 2.63174 12.6157 2.45215 12.4599C2.27255 12.3041 2.04334 12.2174 1.80561 12.2154C1.20561 12.2154 0.725614 12.7454 0.805614 13.3454C1.42561 17.7354 5.60561 20.9854 10.3356 20.0654C13.4556 19.4554 15.9656 16.9454 16.5756 13.8254C17.5656 8.69536 13.6656 4.21536 8.72561 4.21536Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 774 B