|
|
|
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 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">
|
|
|
|
<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 className="bg-blue-600 w-1 h-20 rounded absolute top-1/2 left-0.5 transform -translate-x-1/2 -translate-y-1/2"></div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default CourseChapter;
|
|
|
|
|
|
|
|
CourseChapter.defaultProps = {
|
|
|
|
chapters: [
|
|
|
|
{
|
|
|
|
title: "فصل اول: مباحث جوشش مواد مذاب در مرکز",
|
|
|
|
duration: "2:30:13",
|
|
|
|
lessons: [
|
|
|
|
{ title: "آیا گوگل از ما دزدی میکند؟", duration: "14:30", play: "پخش" },
|
|
|
|
],
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|