import React from "react"; const CourseChapter = ({ chapters }) => { return ( <section style={{ width: "30%" }} className="bg-white mx-auto my-20 p-4"> <div className="rounded py-5 px-4" 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"> <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> {chapter.lessons.map((lesson, index) => ( <div className="flex flex-row items-center justify-around mt-3"> {/* right div dot dot */} <div className="bg-yellow-100" style={{ width: "10%" }}> mahdi </div> {/* left div content */} <div style={{ width: "80%" }}> {/* top */} <div className="bg-white border border-blue-600 p-2 flex flex-col rounded-tr-md rounded-tl-md"> <div className="flex flex-row items-center justify-between"> <p className="text-sm text-blue-500">{lesson.title}</p> <span className="text-xs text-blue-500"> {lesson.duration} </span> </div> </div> {/* bottom */} <div className="bg-white border border-blue-600 p-2 flex flex-col rounded-br-md rounded-bl-md"> <span className="text-xs text-center text-blue-500"> {lesson.play} </span> </div> </div> </div> ))} </div> ))} </div> </section> ); }; export default CourseChapter; CourseChapter.defaultProps = { chapters: [ { title: "فصل اول: مباحث جوشش مواد مذاب در مرکز", duration: "2:30:13", lessons: [ { title: "آیا گوگل از ما دزدی میکند؟", duration: "14:30", play: "پخش" }, ], }, ], };