|
|
|
import React, { useState } from "react";
|
|
|
|
|
|
|
|
const CourseChapter = ({ courseTitle, lessonName, grade, chapters }) => {
|
|
|
|
const [selectedLesson, setSelectedLesson] = useState(null);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="relative p-4 bg-[#196EC033] rounded">
|
|
|
|
{/* 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" 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,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|