import React, { useState } from "react"; const CourseChapter = ({ chapters }) => { const [selectedLesson, setSelectedLesson] = useState(null); return ( <section style={{ width: "30%" }} className="bg-white mx-auto my-20 p-4"> <div className="rounded py-5 px-4 relative" style={{ backgroundColor: "#196EC033" }} > {/* top */} <div className="flex flex-row items-center justify-between"> <div> <h2 className="text-blue-800 text-base">سرفصل دوره</h2> </div> <div className="flex flex-row-reverse items-center divide-x transform translate-x-2"> <span className="text-blue-800 text-sm px-2">علوم تجربی</span> <span className="text-blue-800 text-sm px-2">پایه ششم</span> </div> </div> {/* divider */} <div className="border-b border-blue-300 bg-opacity-10 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 " style={{ width: "10%", transform: "translateY(30px)" }} > <div className={`flex justify-center items-center w-4 h-4 rounded-full ${selectedLesson === lesson ? "bg-red-600" : "bg-blue-600"}, ${lesson.passed ? "bg-red-600" : "bg-blue-600"} `} ></div> <span className="w-1" style={{ borderRight: "2px dotted yellow", transform: "translateX(-1px)", height: "65px", }} ></span> </div> {/* left div content */} <div className={`mt-2 bg-white border border-blue-600 flex flex-col rounded-md cursor-pointer transition duration-200 ease-in-out group hover:bg-blue-600 ${selectedLesson === lesson ? "bg-blue-600" : ""}`} style={{ width: "80%" }} 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> ))} {/* blue left border */} <div className="absolute top-1/2 left-0.5 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 w-1 h-20 rounded"></div> </div> </section> ); }; export default CourseChapter; CourseChapter.defaultProps = { 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, }, ], }, ], };