generated from dwd/boilarplate-remix-tailwind-antd
master
Suvodip
parent
2512a918fb
commit
ec099bf3ab
|
|
@ -0,0 +1,56 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Image } from 'antd';
|
||||||
|
import Index from './AdminNav';
|
||||||
|
const fallBackImage = "data:image/png;base64,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";
|
||||||
|
|
||||||
|
let artCraftImage = [
|
||||||
|
{
|
||||||
|
id: "1",
|
||||||
|
img: "/assets/aimage1.jpg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "2",
|
||||||
|
img: "/assets/aimage2.jpg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3",
|
||||||
|
img: "/assets/aimage3.jpg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "4",
|
||||||
|
img: "/assets/aimage4.jpg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "5",
|
||||||
|
img: "/assets/aimage5.jpg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "6",
|
||||||
|
img: "/assets/aimage2.jpg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "7",
|
||||||
|
img: "/assets/aimage4.jpg",
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const App: React.FC = () => (
|
||||||
|
<Image.PreviewGroup fallback={fallBackImage} preview={{onChange: (current, prev) => console.log(`current index: ${current}, prev index: ${prev}`),}}>
|
||||||
|
<div className=''>
|
||||||
|
<section className='container mx-auto px-4'>
|
||||||
|
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 overflow-hidden mt-10'>
|
||||||
|
{
|
||||||
|
artCraftImage.map((data) => (
|
||||||
|
// <div className='grid grid-cols-1 lg:grid-cols-3' key={data.id}></div>
|
||||||
|
<Image placeholder={true} key={data.id} width={288} height={257} src={data.img}
|
||||||
|
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</Image.PreviewGroup>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
let albumsData = [
|
||||||
|
{
|
||||||
|
id : "1",
|
||||||
|
type : "Art & Craft Album",
|
||||||
|
img : "/assets/athumbnail1.jpg",
|
||||||
|
url : "/albums/art-&-craft"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : "2",
|
||||||
|
type : "GK & Group Activity",
|
||||||
|
img : "/assets/athumbnail2.jpg",
|
||||||
|
url : "/albums/gk-&-group-activity"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : "3",
|
||||||
|
type : "Language & Maths",
|
||||||
|
img : "/assets/athumbnail3.jpg",
|
||||||
|
url : "/albums/language-&-maths"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
export default function AlbumIndex(){
|
||||||
|
return(
|
||||||
|
<div>
|
||||||
|
<section className="container mx-auto px-4">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 p-8">
|
||||||
|
{
|
||||||
|
albumsData.map((data) => (
|
||||||
|
<a href={data.url} key={data.id} className="rounded-[10px] border-[1px] border-[#D4D4D4] relative inline-block">
|
||||||
|
<img className="w-full rounded-[10px]" src={data.img} alt="" />
|
||||||
|
<h2 className="absolute bottom-6 left-6 text-[24px] font-[700] text-[#FFF] underline">{data.type}</h2>
|
||||||
|
</a>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -26,7 +26,7 @@ const materialData: MaterialItem[] = [
|
||||||
type: "Video",
|
type: "Video",
|
||||||
time: "30 mins",
|
time: "30 mins",
|
||||||
date: "28-01-2024",
|
date: "28-01-2024",
|
||||||
source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
|
source: "https://videos.pexels.com/video-files/5538137/5538137-sd_640_360_25fps.mp4"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
|
|
@ -53,7 +53,7 @@ const materialData: MaterialItem[] = [
|
||||||
type: "Video",
|
type: "Video",
|
||||||
time: "30 mins",
|
time: "30 mins",
|
||||||
date: "28-01-2024",
|
date: "28-01-2024",
|
||||||
source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
|
source: "https://videos.pexels.com/video-files/5532762/5532762-sd_960_506_25fps.mp4"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 6,
|
id: 6,
|
||||||
|
|
@ -62,7 +62,7 @@ const materialData: MaterialItem[] = [
|
||||||
type: "Video",
|
type: "Video",
|
||||||
time: "30 mins",
|
time: "30 mins",
|
||||||
date: "28-01-2024",
|
date: "28-01-2024",
|
||||||
source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
|
source: "https://videos.pexels.com/video-files/5538262/5538262-sd_640_360_25fps.mp4"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
@ -93,14 +93,16 @@ const TimelineComponent = () => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<section className='container mx-auto px-4'>
|
<section className='container mx-auto px-4'>
|
||||||
<div className='grid grid-cols-1 md:grid-cols-7'>
|
<div className='grid grid-cols-1 md:grid-cols-7 gap-x-8'>
|
||||||
<div className='md:col-span-2 mt-4'>
|
<div className='md:col-span-2 h-screen border-r-[1px] border-r-[#CFCFCF]'>
|
||||||
<Timeline items={timelineItems} />
|
<div className='mt-[40px]'>
|
||||||
|
<Timeline items={timelineItems} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='md:col-span-5'>
|
<div className='md:col-span-5 '>
|
||||||
<div>
|
<div className='pt-8'>
|
||||||
{selectedItem.type === 'Video' && (
|
{selectedItem.type === 'Video' && (
|
||||||
<video autoPlay={true} controls src={selectedItem.source} width="100%" />
|
<video autoPlay loop controls src={selectedItem.source} width="100%" muted />
|
||||||
)}
|
)}
|
||||||
{selectedItem.type === 'Reading Material' && (
|
{selectedItem.type === 'Reading Material' && (
|
||||||
<iframe src={selectedItem.source} width="100%" height="500px" />
|
<iframe src={selectedItem.source} width="100%" height="500px" />
|
||||||
|
|
@ -0,0 +1,126 @@
|
||||||
|
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/5538137/5538137-sd_640_360_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/5532762/5532762-sd_960_506_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/5538262/5538262-sd_640_360_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 gap-x-8'>
|
||||||
|
<div className='md:col-span-2 h-screen border-r-[1px] border-r-[#CFCFCF]'>
|
||||||
|
<div className='mt-[40px]'>
|
||||||
|
<Timeline items={timelineItems} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='md:col-span-5 '>
|
||||||
|
<div className='pt-8'>
|
||||||
|
{selectedItem.type === 'Video' && (
|
||||||
|
<video autoPlay loop controls src={selectedItem.source} width="100%" muted />
|
||||||
|
)}
|
||||||
|
{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;
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
type PracticalData = {
|
||||||
|
id: number;
|
||||||
|
module: number;
|
||||||
|
status: number;
|
||||||
|
time: number;
|
||||||
|
access: number;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
img: string;
|
||||||
|
total_marks: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
let practicalData: PracticalData[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
module: 1,
|
||||||
|
status: 2,
|
||||||
|
time: 20,
|
||||||
|
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/pimage1.jpg",
|
||||||
|
total_marks: "50"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
module: 2,
|
||||||
|
status: 1,
|
||||||
|
time: 20,
|
||||||
|
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/pimage2.jpg",
|
||||||
|
total_marks: "50"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
module: 3,
|
||||||
|
status: 0,
|
||||||
|
time: 20,
|
||||||
|
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/pimage3.jpg",
|
||||||
|
total_marks: "50"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
module: 1,
|
||||||
|
status: 0,
|
||||||
|
time: 20,
|
||||||
|
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/pimage1.jpg",
|
||||||
|
total_marks: "50"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
module: 2,
|
||||||
|
status: 0,
|
||||||
|
time: 20,
|
||||||
|
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/pimage2.jpg",
|
||||||
|
total_marks: "50"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
module: 3,
|
||||||
|
status: 0,
|
||||||
|
time: 20,
|
||||||
|
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/pimage3.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] bg-[#FBFBFB] border-[1px] border-[#D1D1D1]">
|
||||||
|
<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/pimage3.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-[#000] 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-[#000] text-[#FFF] 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 lg:grid-cols-2 p-6 gap-10 ">
|
||||||
|
{
|
||||||
|
practicalData.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} mins of Practical</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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
import React, {useState} from 'react';
|
||||||
|
import { RightOutlined} from '@ant-design/icons';
|
||||||
|
import AlbumsIndex from '~/components/AlbumsIndex';
|
||||||
|
import {Layout, theme, Button, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
|
||||||
|
import '../../public/assets/left_side_nav.css';
|
||||||
|
import LeftSideMenu from '~/components/LeftSideMenuItems';
|
||||||
|
|
||||||
|
|
||||||
|
const { Content, Sider } = Layout;
|
||||||
|
|
||||||
|
const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
|
||||||
|
key,
|
||||||
|
label: `navsd ${key}`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
type MenuItem = Required<MenuProps>['items'][number];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const items: MenuProps['items'] = [
|
||||||
|
{
|
||||||
|
label: <a href="https://www.antgroup.com">1st menu item</a>,
|
||||||
|
key: '01sd',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'divider',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: <a href="https://www.aliyun.com">2nd menu item</a>,
|
||||||
|
key: '02sd',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'divider',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '3rd menu item',
|
||||||
|
key: '03sd',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const 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>
|
||||||
|
<Layout>
|
||||||
|
<div >
|
||||||
|
<Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0, background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
|
||||||
|
<div className='flex flex-col justify-center demo-logo-vertical'>
|
||||||
|
<div className='px-4'>
|
||||||
|
<h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<LeftSideMenu />
|
||||||
|
</Sider>
|
||||||
|
</div>
|
||||||
|
<Layout style={{marginLeft: collapsed ? 80 : 366, background: '#FFF', transition: 'margin-left 0.2s ease'}}>
|
||||||
|
<Content style={{ overflow: 'initial',}}>
|
||||||
|
<div className='border-b-[1px] py-2 border-[#CFCFCF]'>
|
||||||
|
<div className='container mx-auto flex flex-row justify-between pr-8'>
|
||||||
|
<div className='inline-flex justify-center place-items-center'>
|
||||||
|
<Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="/mycourse">Course</a>,},{title: 'Albums',},]}/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
|
||||||
|
<div className='border-[1px] border[#525252] rounded-full p-2 w-[47px] h-[47px]'>
|
||||||
|
<img src="/assets/notification-bell.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
<Dropdown menu={{ items }} trigger={['click']}>
|
||||||
|
<a onClick={(e) => e.preventDefault()}>
|
||||||
|
<Space>
|
||||||
|
<div className='flex flex-row border-[1px] border-[#BBBBBB] rounded-full p-1 gap-x-6'>
|
||||||
|
<img src="/assets/man.png" alt="" />
|
||||||
|
<div>
|
||||||
|
<p className='text-[12px] text-[#EF7A0C] font-[500]'>My Profile</p>
|
||||||
|
<p className='text-[16px] text-[#27549F] font-[700]'>Rayan Holiday</p>
|
||||||
|
</div>
|
||||||
|
<RightOutlined style={{ fontSize: '12px', paddingRight: '10px' }} />
|
||||||
|
</div>
|
||||||
|
</Space>
|
||||||
|
</a>
|
||||||
|
</Dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Place Content from here */}
|
||||||
|
<AlbumsIndex />
|
||||||
|
|
||||||
|
</Content>
|
||||||
|
</Layout>
|
||||||
|
</Layout>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default App;
|
||||||
|
|
||||||
|
|
@ -0,0 +1,107 @@
|
||||||
|
import React, {useState} from 'react';
|
||||||
|
import { RightOutlined} from '@ant-design/icons';
|
||||||
|
import AlbumArtCraft from '~/components/AlbumArt&Craft';
|
||||||
|
import {Layout, theme, Button, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
|
||||||
|
import '../../public/assets/left_side_nav.css';
|
||||||
|
import LeftSideMenu from '~/components/LeftSideMenuItems';
|
||||||
|
|
||||||
|
const { Content, Sider } = Layout;
|
||||||
|
|
||||||
|
const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
|
||||||
|
key,
|
||||||
|
label: `navsd ${key}`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
type MenuItem = Required<MenuProps>['items'][number];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const items: MenuProps['items'] = [
|
||||||
|
{
|
||||||
|
label: <a href="https://www.antgroup.com">1st menu item</a>,
|
||||||
|
key: '01sd',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'divider',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: <a href="https://www.aliyun.com">2nd menu item</a>,
|
||||||
|
key: '02sd',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'divider',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '3rd menu item',
|
||||||
|
key: '03sd',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const 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>
|
||||||
|
<Layout>
|
||||||
|
<div >
|
||||||
|
<Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0, background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
|
||||||
|
<div className='flex flex-col justify-center demo-logo-vertical'>
|
||||||
|
<div className='px-4'>
|
||||||
|
<h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<LeftSideMenu />
|
||||||
|
</Sider>
|
||||||
|
</div>
|
||||||
|
<Layout style={{marginLeft: collapsed ? 80 : 366, background: '#FFF', transition: 'margin-left 0.2s ease'}}>
|
||||||
|
<Content style={{ overflow: 'initial',}}>
|
||||||
|
<div className='border-b-[1px] py-2 border-[#CFCFCF]'>
|
||||||
|
<div className='container mx-auto flex flex-row justify-between pr-8'>
|
||||||
|
<div className='inline-flex justify-center place-items-center'>
|
||||||
|
<Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="/mycourse">Course</a>,},{title: 'Albums',},]}/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
|
||||||
|
<div className='border-[1px] border[#525252] rounded-full p-2 w-[47px] h-[47px]'>
|
||||||
|
<img src="/assets/notification-bell.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
<Dropdown menu={{ items }} trigger={['click']}>
|
||||||
|
<a onClick={(e) => e.preventDefault()}>
|
||||||
|
<Space>
|
||||||
|
<div className='flex flex-row border-[1px] border-[#BBBBBB] rounded-full p-1 gap-x-6'>
|
||||||
|
<img src="/assets/man.png" alt="" />
|
||||||
|
<div>
|
||||||
|
<p className='text-[12px] text-[#EF7A0C] font-[500]'>My Profile</p>
|
||||||
|
<p className='text-[16px] text-[#27549F] font-[700]'>Rayan Holiday</p>
|
||||||
|
</div>
|
||||||
|
<RightOutlined style={{ fontSize: '12px', paddingRight: '10px' }} />
|
||||||
|
</div>
|
||||||
|
</Space>
|
||||||
|
</a>
|
||||||
|
</Dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Place Content from here */}
|
||||||
|
<AlbumArtCraft />
|
||||||
|
</Content>
|
||||||
|
</Layout>
|
||||||
|
</Layout>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default App;
|
||||||
|
|
||||||
|
|
@ -0,0 +1,112 @@
|
||||||
|
import React, {useState} from 'react';
|
||||||
|
import { RightOutlined} from '@ant-design/icons';
|
||||||
|
import PracticalCourse from '~/components/PracticalCourses';
|
||||||
|
import {Layout, theme, Button, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
|
||||||
|
import '../../public/assets/left_side_nav.css';
|
||||||
|
import LeftSideMenu from '~/components/LeftSideMenuItems';
|
||||||
|
|
||||||
|
|
||||||
|
const { Content, Sider } = Layout;
|
||||||
|
|
||||||
|
const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
|
||||||
|
key,
|
||||||
|
label: `navsd ${key}`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
type MenuItem = Required<MenuProps>['items'][number];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const items: MenuProps['items'] = [
|
||||||
|
{
|
||||||
|
label: <a href="https://www.antgroup.com">1st menu item</a>,
|
||||||
|
key: '01sd',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'divider',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: <a href="https://www.aliyun.com">2nd menu item</a>,
|
||||||
|
key: '02sd',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'divider',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '3rd menu item',
|
||||||
|
key: '03sd',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const 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>
|
||||||
|
<Layout>
|
||||||
|
<div >
|
||||||
|
<Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0, background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
|
||||||
|
<div className='flex flex-col justify-center demo-logo-vertical'>
|
||||||
|
<div className='px-4'>
|
||||||
|
<h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<LeftSideMenu />
|
||||||
|
</Sider>
|
||||||
|
</div>
|
||||||
|
<Layout style={{marginLeft: collapsed ? 80 : 366, background: '#FFF', transition: 'margin-left 0.2s ease'}}>
|
||||||
|
<Content style={{ overflow: 'initial',}}>
|
||||||
|
<div className='border-b-[1px] py-2 border-[#CFCFCF]'>
|
||||||
|
<div className='container mx-auto flex flex-row justify-between pr-8'>
|
||||||
|
<div className='inline-flex justify-center place-items-center'>
|
||||||
|
<Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="/mycourse">Course</a>,},{title: 'Practical',},]}/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
|
||||||
|
<div className='border-[1px] border[#525252] rounded-full p-2 w-[47px] h-[47px]'>
|
||||||
|
<img src="../../assets/notification-bell.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
<Dropdown menu={{ items }} trigger={['click']}>
|
||||||
|
<a onClick={(e) => e.preventDefault()}>
|
||||||
|
<Space>
|
||||||
|
<div className='flex flex-row border-[1px] border-[#BBBBBB] rounded-full p-1 gap-x-6'>
|
||||||
|
<img src="/assets/man.png" alt="" />
|
||||||
|
<div>
|
||||||
|
<p className='text-[12px] text-[#EF7A0C] font-[500]'>My Profile</p>
|
||||||
|
<p className='text-[16px] text-[#27549F] font-[700]'>Rayan Holiday</p>
|
||||||
|
</div>
|
||||||
|
<RightOutlined style={{ fontSize: '12px', paddingRight: '10px' }} />
|
||||||
|
</div>
|
||||||
|
</Space>
|
||||||
|
</a>
|
||||||
|
</Dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className=''>
|
||||||
|
<PracticalCourse />
|
||||||
|
</div>
|
||||||
|
{/* Place Content from here */}
|
||||||
|
|
||||||
|
|
||||||
|
</Content>
|
||||||
|
</Layout>
|
||||||
|
</Layout>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default App;
|
||||||
|
|
||||||
|
|
@ -31,7 +31,7 @@ const items: MenuProps['items'] = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'divider',
|
type: 'divider',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '3rd menu item',
|
label: '3rd menu item',
|
||||||
key: '03sd',
|
key: '03sd',
|
||||||
|
|
@ -0,0 +1,113 @@
|
||||||
|
import React, {useState} from 'react';
|
||||||
|
import { RightOutlined} from '@ant-design/icons';
|
||||||
|
|
||||||
|
import TheoryCourse from '~/components/MyCoursePracticalModule';
|
||||||
|
import {Layout, theme, Button, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
|
||||||
|
import '../../public/assets/left_side_nav.css';
|
||||||
|
import LeftSideMenu from '~/components/LeftSideMenuItems';
|
||||||
|
|
||||||
|
|
||||||
|
const { Content, Sider } = Layout;
|
||||||
|
|
||||||
|
const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
|
||||||
|
key,
|
||||||
|
label: `navsd ${key}`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
type MenuItem = Required<MenuProps>['items'][number];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const items: MenuProps['items'] = [
|
||||||
|
{
|
||||||
|
label: <a href="https://www.antgroup.com">1st menu item</a>,
|
||||||
|
key: '01sd',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'divider',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: <a href="https://www.aliyun.com">2nd menu item</a>,
|
||||||
|
key: '02sd',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'divider',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '3rd menu item',
|
||||||
|
key: '03sd',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const Course: React.FC = () => {
|
||||||
|
const [collapsed, setCollapsed] = useState(false);
|
||||||
|
const [open, setOpen] = React.useState<boolean>(false);
|
||||||
|
const [loading, setLoading] = React.useState<boolean>(true);
|
||||||
|
const showLoading = () => {
|
||||||
|
setOpen(true);
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
// Simple loading mock. You should add cleanup logic in real world.
|
||||||
|
setTimeout(() => {
|
||||||
|
setLoading(false);
|
||||||
|
}, 100);
|
||||||
|
};
|
||||||
|
const { token: { colorBgContainer}, } = theme.useToken();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<Layout>
|
||||||
|
<div >
|
||||||
|
<Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0, background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
|
||||||
|
<div className='flex flex-col justify-center demo-logo-vertical'>
|
||||||
|
<div className='px-4'>
|
||||||
|
<h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<LeftSideMenu />
|
||||||
|
</Sider>
|
||||||
|
</div>
|
||||||
|
<Layout style={{marginLeft: collapsed ? 80 : 366, background: '#FFF', transition: 'margin-left 0.2s ease'}}>
|
||||||
|
<Content style={{ overflow: 'initial',}}>
|
||||||
|
<div className='border-b-[1px] py-2 border-[#CFCFCF]'>
|
||||||
|
<div className='container mx-auto flex flex-row justify-between pr-8'>
|
||||||
|
<div className='inline-flex justify-center place-items-center'>
|
||||||
|
<Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="/mycourse">Course</a>,},{title: <a href="/mycourse/practical">Practical</a>,},{title: 'Practical 1 : Exercises of Practical Life'}]}/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
|
||||||
|
<div className='border-[1px] border[#525252] rounded-full p-2 w-[47px] h-[47px]'>
|
||||||
|
<img src="../../assets/notification-bell.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
<Dropdown menu={{ items }} trigger={['click']}>
|
||||||
|
<a onClick={(e) => e.preventDefault()}>
|
||||||
|
<Space>
|
||||||
|
<div className='flex flex-row border-[1px] border-[#BBBBBB] rounded-full p-1 gap-x-6'>
|
||||||
|
<img src="/assets/man.png" alt="" />
|
||||||
|
<div>
|
||||||
|
<p className='text-[12px] text-[#EF7A0C] font-[500]'>My Profile</p>
|
||||||
|
<p className='text-[16px] text-[#27549F] font-[700]'>Rayan Holiday</p>
|
||||||
|
</div>
|
||||||
|
<RightOutlined style={{ fontSize: '12px', paddingRight: '10px' }} />
|
||||||
|
</div>
|
||||||
|
</Space>
|
||||||
|
</a>
|
||||||
|
</Dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className=''>
|
||||||
|
<TheoryCourse />
|
||||||
|
</div>
|
||||||
|
{/* Place Content from here */}
|
||||||
|
|
||||||
|
|
||||||
|
</Content>
|
||||||
|
</Layout>
|
||||||
|
</Layout>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default Course;
|
||||||
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import React, {useState} from 'react';
|
import React, {useState} from 'react';
|
||||||
import { RightOutlined} from '@ant-design/icons';
|
import { RightOutlined} from '@ant-design/icons';
|
||||||
|
|
||||||
import StartCourse from '~/components/StartCourse';
|
import StartCourse from '~/components/MyCourseTheoryModule';
|
||||||
import {Layout, theme, Button, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
|
import {Layout, theme, Button, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
|
||||||
import '../../public/assets/left_side_nav.css';
|
import '../../public/assets/left_side_nav.css';
|
||||||
import LeftSideMenu from '~/components/LeftSideMenuItems';
|
import LeftSideMenu from '~/components/LeftSideMenuItems';
|
||||||
|
|
@ -72,7 +72,7 @@ const Course: React.FC = () => {
|
||||||
<div className='border-b-[1px] py-2 border-[#CFCFCF]'>
|
<div className='border-b-[1px] py-2 border-[#CFCFCF]'>
|
||||||
<div className='container mx-auto flex flex-row justify-between pr-8'>
|
<div className='container mx-auto flex flex-row justify-between pr-8'>
|
||||||
<div className='inline-flex justify-center place-items-center'>
|
<div className='inline-flex justify-center place-items-center'>
|
||||||
<Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="">Course</a>,},{title: 'Theory',},]}/>
|
<Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="/mycourse">Course</a>,},{title: <a href="/mycourse/theory">Theory</a>,},{title: 'Module 1 : Life History of Dr. Maria Montessori'}]}/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
|
<Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
Loading…
Reference in New Issue