You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
216 lines
7.2 KiB
216 lines
7.2 KiB
import React, { useState } from "react"; |
|
|
|
const CourseChapter = ({ courseTitle, lessonName, grade, chapters }) => { |
|
const [selectedLesson, setSelectedLesson] = useState(null); |
|
|
|
return ( |
|
<div className="max-h-[444px] relative p-4 bg-[#196EC033] rounded overflow-y-auto scrollYDesign"> |
|
{/* top */} |
|
<div className="flex flex-row items-center justify-between"> |
|
<h2 className="text-blue-800 text-base">{courseTitle}</h2> |
|
<div className="flex flex-row-reverse items-center divide-x"> |
|
<span className="text-blue-800 text-sm px-2">{lessonName}</span> |
|
<span className="text-blue-800 text-sm px-2">{grade}</span> |
|
</div> |
|
</div> |
|
{/* divider */} |
|
<div className="border-b border-blue-300 my-5"></div> |
|
{/* course title */} |
|
{chapters.map((chapter, index) => ( |
|
<div className="flex flex-col mt-4" key={index}> |
|
<div className="bg-blue-600 rounded-sm p-4 flex flex-row items-center justify-between"> |
|
<p className="text-sm text-white">{chapter.title}</p> |
|
<span className="text-sm text-white">{chapter.duration}</span> |
|
</div> |
|
{/* course lessons */} |
|
{chapter.lessons.map((lesson, i) => ( |
|
<div className="flex flex-row items-center justify-around" key={i}> |
|
{/* right div dot dot */} |
|
<div |
|
className={`flex items-center relative flex-col mx-5 transform ${ |
|
Number(i) === chapter.lessons.length - 1 |
|
? "translate-y-0" |
|
: "translate-y-[35px]" |
|
}`} |
|
> |
|
<div |
|
className={`w-4 h-4 flex justify-center items-center rounded-full |
|
${selectedLesson === lesson ? "bg-red-600" : "bg-blue-600"}, |
|
${lesson.passed ? "bg-red-600" : "bg-blue-600"} |
|
`} |
|
></div> |
|
{Number(i) !== chapter.lessons.length - 1 && ( |
|
<span |
|
className={`h-[65px] border-r-2 border-dotted ${ |
|
lesson.passed ? "border-green-400" : "border-purple-400" |
|
}`} |
|
></span> |
|
)} |
|
</div> |
|
{/* left div content */} |
|
<div |
|
className={`group flex-1 flex flex-col mt-2 bg-white hover:bg-blue-600 border border-blue-600 rounded-md cursor-pointer transition duration-200 ease-in-out |
|
${selectedLesson === lesson ? "bg-blue-600" : ""}`} |
|
onClick={() => setSelectedLesson(lesson)} |
|
> |
|
{/* top */} |
|
<div className="flex flex-row items-center justify-between p-2"> |
|
<p |
|
className={`text-sm text-blue-500 group-hover:text-white |
|
${selectedLesson === lesson ? "text-red-600" : ""}`} |
|
> |
|
{lesson.title} |
|
</p> |
|
<span |
|
className={`text-xs text-blue-500 group-hover:text-white border-r border-blue-200 pr-1 |
|
${selectedLesson === lesson ? "text-red-600" : ""}`} |
|
> |
|
{lesson.duration} |
|
</span> |
|
</div> |
|
{/* divider */} |
|
<div |
|
className={`border-t border-blue-600 group-hover:border-white ${ |
|
selectedLesson === lesson ? "border-red-600" : "" |
|
}`} |
|
></div> |
|
{/* bottom */} |
|
<span |
|
className={`text-xs text-center text-blue-500 group-hover:text-white p-2 |
|
${selectedLesson === lesson ? "text-red-600" : ""}`} |
|
> |
|
{lesson.play} |
|
</span> |
|
</div> |
|
</div> |
|
))} |
|
</div> |
|
))} |
|
</div> |
|
); |
|
}; |
|
|
|
export default CourseChapter; |
|
|
|
CourseChapter.defaultProps = { |
|
courseTitle: "سرفصل دوره", |
|
lessonName: "علوم تجربی", |
|
grade: "پایه ششم", |
|
|
|
chapters: [ |
|
{ |
|
title: "فصل اول: مباحث جوشش مواد مذاب در مرکز", |
|
duration: "2:30:13", |
|
lessons: [ |
|
{ |
|
title: "آیا گوگل از ما دزدی میکند؟", |
|
duration: "14:30", |
|
play: "پخش", |
|
passed: true, |
|
}, |
|
{ |
|
title: "چگونگی ساخت نیروگاه های برقی", |
|
duration: "22:31", |
|
play: "در حال پخش", |
|
passed: true, |
|
}, |
|
{ |
|
title: "آیا از اینترنت می توان درآمد داشت؟", |
|
duration: "10:09", |
|
play: "نمایش", |
|
passed: false, |
|
}, |
|
{ |
|
title: "زمین سبز و آسمان آبی", |
|
duration: "56:09", |
|
play: "نمایش", |
|
passed: false, |
|
}, |
|
], |
|
}, |
|
{ |
|
title: "فصل اول: مباحث جوشش مواد مذاب در مرکز", |
|
duration: "2:30:13", |
|
lessons: [ |
|
{ |
|
title: "آیا گوگل از ما دزدی میکند؟", |
|
duration: "14:30", |
|
play: "پخش", |
|
passed: true, |
|
}, |
|
{ |
|
title: "چگونگی ساخت نیروگاه های برقی", |
|
duration: "22:31", |
|
play: "در حال پخش", |
|
passed: true, |
|
}, |
|
{ |
|
title: "آیا از اینترنت می توان درآمد داشت؟", |
|
duration: "10:09", |
|
play: "نمایش", |
|
passed: false, |
|
}, |
|
{ |
|
title: "زمین سبز و آسمان آبی", |
|
duration: "56:09", |
|
play: "نمایش", |
|
passed: false, |
|
}, |
|
], |
|
}, |
|
{ |
|
title: "فصل اول: مباحث جوشش مواد مذاب در مرکز", |
|
duration: "2:30:13", |
|
lessons: [ |
|
{ |
|
title: "آیا گوگل از ما دزدی میکند؟", |
|
duration: "14:30", |
|
play: "پخش", |
|
passed: true, |
|
}, |
|
{ |
|
title: "چگونگی ساخت نیروگاه های برقی", |
|
duration: "22:31", |
|
play: "در حال پخش", |
|
passed: true, |
|
}, |
|
{ |
|
title: "آیا از اینترنت می توان درآمد داشت؟", |
|
duration: "10:09", |
|
play: "نمایش", |
|
passed: true, |
|
}, |
|
{ |
|
title: "زمین سبز و آسمان آبی", |
|
duration: "56:09", |
|
play: "نمایش", |
|
passed: true, |
|
}, |
|
{ |
|
title: "آیا گوگل از ما دزدی میکند؟", |
|
duration: "14:30", |
|
play: "پخش", |
|
passed: true, |
|
}, |
|
{ |
|
title: "چگونگی ساخت نیروگاه های برقی", |
|
duration: "22:31", |
|
play: "در حال پخش", |
|
passed: true, |
|
}, |
|
{ |
|
title: "آیا از اینترنت می توان درآمد داشت؟", |
|
duration: "10:09", |
|
play: "نمایش", |
|
passed: true, |
|
}, |
|
{ |
|
title: "زمین سبز و آسمان آبی", |
|
duration: "56:09", |
|
play: "نمایش", |
|
passed: false, |
|
}, |
|
], |
|
}, |
|
], |
|
};
|
|
|