generated from dwd/boilarplate-remix-tailwind-antd
s1
This commit is contained in:
Suvodip
@@ -40,27 +40,22 @@ export default function KnowledgeQuests() {
|
||||
}
|
||||
return(
|
||||
<section className=''>
|
||||
<div className=''>
|
||||
<div className=''>
|
||||
<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>
|
||||
<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>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
136
app/components/LeftSideMenuItems.tsx
Normal file
136
app/components/LeftSideMenuItems.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
import React, {useState} from 'react';
|
||||
import {Layout, Menu, theme, Button, Modal, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
|
||||
import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} from '@ant-design/icons';
|
||||
import '../../public/assets/left_side_nav.css';
|
||||
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';
|
||||
|
||||
|
||||
|
||||
const items2: MenuProps['items'] = [
|
||||
{
|
||||
key: 'subsd1',
|
||||
icon: <AdministrationIcon />,
|
||||
label: (<p className='py-2.5'> Administration</p>),
|
||||
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: (<p className='py-2.5'> My Courses</p>),
|
||||
children: [
|
||||
{
|
||||
key: '4sd',
|
||||
label: (<a href='#'>Graduate Program</a>),
|
||||
},
|
||||
{
|
||||
key: '5sd',
|
||||
label: (<a href='#'>Post-Graduate Program</a>),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'subsd3',
|
||||
icon: <ExaminationIcon />,
|
||||
label: (<p className='py-2.5'> Examinations</p>),
|
||||
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: (<p className='py-2.5'> Community</p>),
|
||||
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: (<p className='py-2.5'> Notifications</p>),
|
||||
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 LeftSideMenu: React.FC = () => {
|
||||
return(
|
||||
<Menu className='custom-menu' mode="inline" style={{ height: '100%', borderRight: 0, paddingTop: 30, background: 'transparent'}} items={items2} />
|
||||
)
|
||||
}
|
||||
export default LeftSideMenu;
|
||||
124
app/components/StartCourse.tsx
Normal file
124
app/components/StartCourse.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Timeline } from 'antd';
|
||||
interface MaterialItem {
|
||||
id: number;
|
||||
material: number;
|
||||
title: string;
|
||||
type: string;
|
||||
time: string;
|
||||
date: string;
|
||||
source: string;
|
||||
}
|
||||
const materialData: MaterialItem[] = [
|
||||
{
|
||||
id: 1,
|
||||
material: 1,
|
||||
title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
|
||||
type: "Video",
|
||||
time: "30 mins",
|
||||
date: "28-01-2024",
|
||||
source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
material: 1,
|
||||
title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
|
||||
type: "Video",
|
||||
time: "30 mins",
|
||||
date: "28-01-2024",
|
||||
source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
material: 1,
|
||||
title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
|
||||
type: "Reading Material",
|
||||
time: "8 mins",
|
||||
date: "28-01-2024",
|
||||
source: "https://pdfobject.com/pdf/sample.pdf"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
material: 1,
|
||||
title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
|
||||
type: "MCQ",
|
||||
time: "5 mins",
|
||||
date: "28-01-2024",
|
||||
source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
material: 1,
|
||||
title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
|
||||
type: "Video",
|
||||
time: "30 mins",
|
||||
date: "28-01-2024",
|
||||
source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
material: 1,
|
||||
title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
|
||||
type: "Video",
|
||||
time: "30 mins",
|
||||
date: "28-01-2024",
|
||||
source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
|
||||
}
|
||||
];
|
||||
|
||||
const TimelineComponent = () => {
|
||||
const [selectedItem, setSelectedItem] = useState(materialData[0]);
|
||||
|
||||
const handleItemClick = (item : MaterialItem) => {
|
||||
setSelectedItem(item);
|
||||
};
|
||||
|
||||
const timelineItems = materialData.map((item) => ({
|
||||
children: (
|
||||
<div className='p-2' onClick={() => handleItemClick(item)} style={{ cursor: 'pointer', backgroundColor: item.id === selectedItem.id ? '#FFF4EA' : '#FFF'}}>
|
||||
<p className='text-[12px] font-[600] text-[#6E6E6E]'><span>Material {item.material} </span> | <span>{item.date} </span></p>
|
||||
<h2 className='text-[18px] font-[700]'>{item.title}</h2>
|
||||
<p className='text-[14px] font-[600] text-[#EF7A0C]'><span>{item.type}</span> | <span>{item.time}</span></p>
|
||||
</div>
|
||||
),
|
||||
color: item.id === selectedItem.id ? '#EF7A0C' : '#CFCFCF',
|
||||
dot: item.id === selectedItem.id
|
||||
? <div className='relative inline-block'>
|
||||
<span className='' style={{ border: '4px solid #EF7A0C', borderRadius: '50%', display: 'inline-block', width: 32, height: 32 }}></span>
|
||||
<span className='absolute inset-0 m-auto mt-[10px] h-10 w-10' style={{ backgroundColor: '#EF7A0C', borderRadius: '50%', display: 'inline-block', width: 12, height: 12 }}></span>
|
||||
</div>
|
||||
: null,
|
||||
}));
|
||||
|
||||
return (
|
||||
<div>
|
||||
<section className='container mx-auto px-4'>
|
||||
<div className='grid grid-cols-1 md:grid-cols-7'>
|
||||
<div className='md:col-span-2 mt-4'>
|
||||
<Timeline items={timelineItems} />
|
||||
</div>
|
||||
<div className='md:col-span-5'>
|
||||
<div>
|
||||
{selectedItem.type === 'Video' && (
|
||||
<video autoPlay={true} controls src={selectedItem.source} width="100%" />
|
||||
)}
|
||||
{selectedItem.type === 'Reading Material' && (
|
||||
<iframe src={selectedItem.source} width="100%" height="500px" />
|
||||
)}
|
||||
{selectedItem.type === 'MCQ' && (
|
||||
<div>
|
||||
{/* Render MCQ content here */}
|
||||
</div>
|
||||
)}
|
||||
<p className='text-[12px] font-[600] text-[#6E6E6E]'><span>Material {selectedItem.material} </span> | <span>{selectedItem.date} </span></p>
|
||||
<h2 className='text-[18px] font-[700]'>{selectedItem.title}</h2>
|
||||
<p className='text-[14px] font-[600] text-[#EF7A0C]'><span>{selectedItem.type}</span> | <span>{selectedItem.time}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TimelineComponent;
|
||||
133
app/components/TheoryCourses.tsx
Normal file
133
app/components/TheoryCourses.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
type TheoryData = {
|
||||
id: number;
|
||||
module: number;
|
||||
status: number;
|
||||
time: number;
|
||||
access: number;
|
||||
title: string;
|
||||
description: string;
|
||||
img: string;
|
||||
total_marks: string;
|
||||
};
|
||||
|
||||
let theoryData: TheoryData[] = [
|
||||
{
|
||||
id: 1,
|
||||
module: 1,
|
||||
status: 2,
|
||||
time: 4,
|
||||
access: 1,
|
||||
title: "Life History of Dr. Maria Montessori",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
||||
img: "/assets/image1.jpg",
|
||||
total_marks: "50"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
module: 2,
|
||||
status: 1,
|
||||
time: 4,
|
||||
access: 1,
|
||||
title: "Introduction to Montessori Methods",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
||||
img: "/assets/image2.jpg",
|
||||
total_marks: "50"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
module: 3,
|
||||
status: 0,
|
||||
time: 4,
|
||||
access: 0,
|
||||
title: "Exercises in Practical Life",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
||||
img: "/assets/image3.jpg",
|
||||
total_marks: "50"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
module: 1,
|
||||
status: 0,
|
||||
time: 4,
|
||||
access: 0,
|
||||
title: "Life History of Dr. Maria Montessori",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
||||
img: "/assets/image1.jpg",
|
||||
total_marks: "50"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
module: 2,
|
||||
status: 0,
|
||||
time: 4,
|
||||
access: 0,
|
||||
title: "Introduction to Montessori Methods",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
||||
img: "/assets/image2.jpg",
|
||||
total_marks: "50"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
module: 3,
|
||||
status: 0,
|
||||
time: 4,
|
||||
access: 0,
|
||||
title: "Exercises in Practical Life",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
||||
img: "/assets/image3.jpg",
|
||||
total_marks: "50"
|
||||
}
|
||||
];
|
||||
|
||||
export default function CourseTheory() {
|
||||
const getStatusText = (status: number): string => {
|
||||
if (status === 2) return "<p style='color: #218B32; font-weight: 600; font-size: 18px; display: inline-flex;'><img style='margin-right: 8px;' src='/assets/green-tick.svg' />Finished</p>";
|
||||
if (status === 1) return "<p style='color: #EF7A0C; font-weight: 600; font-size: 18px' >40% Completed</p>";
|
||||
if (status === 0) return " ";
|
||||
return "";
|
||||
}
|
||||
|
||||
return(
|
||||
<div>
|
||||
<section className="container mx-auto p-4 px-10">
|
||||
<div className="flex flex-row justify-between place-items-center rounded-[10px]" style={{background: 'linear-gradient(90.65deg, #4377C6 0%, #3B70C0 100%)'}}>
|
||||
<div className="flex flex-row h-[107px] place-items-center p-4 space-x-6">
|
||||
<div className="relative inline-block">
|
||||
<img className="h-[81px] w-[137px] rounded-[10px]" src="/assets/image3.jpg" alt="" />
|
||||
<button className="absolute inset-0 m-auto h-10 w-10">
|
||||
<img src="/assets/play.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="">
|
||||
<h2 className="tet-[18px] font-[700] text-[#FFF] w-[328px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
|
||||
<p className="text-[14px] font-[600] text-[#EF7A0C]">
|
||||
<span> Video</span> |
|
||||
<span> 30 mins</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pr-4">
|
||||
<button className="bg-[#FFF] text-[#000] font-[600] px-6 py-2 text-[18px] rounded-[8px]">Continue Learning</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="container mx-auto px-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 p-6 gap-10 ">
|
||||
{
|
||||
theoryData.map((data, index) => (
|
||||
<div key={index} className={`border-[1px] border-[#218B32] p-3 rounded-[10px] ${data.access === 0 ? 'contrast-[0.3]' : ''} `}>
|
||||
<img className="w-full rounded-[8px]" src={data.img} alt="" />
|
||||
<h2 className="text-[18px] font-[700]">{data.title}</h2>
|
||||
<p className="text-[14px] font-[700] text-[#EF7A0C] py-2"><span>{data.time} Hours</span> | <span>Net Total Marks {data.total_marks}</span></p>
|
||||
<p className="text-[14px] font-[500] text-[#6E6E6E] pb-6">{data.description}</p>
|
||||
<div className="flex flex-row justify-between place-items-center">
|
||||
<button disabled={data.access === 0} className={`text-[18px] font-[600] bg-[#000] rounded-[8px] px-[50px] py-2 text-[#fff] ${data.access == 0 ? 'cursor-not-allowed' : ''}`}>{data.access === 0 ? 'Locked' : 'View'}</button> <div dangerouslySetInnerHTML={{ __html: getStatusText(data.status) }} />
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user