| 
						
						
						
					 | 
					 | 
					@ -1,6 +1,8 @@ | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					import React from "react"; | 
					 | 
					 | 
					 | 
					import React, { useState } from "react"; | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					const CourseChapter = ({ chapters }) => { | 
					 | 
					 | 
					 | 
					const CourseChapter = ({ chapters }) => { | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					  const [selectedLesson, setSelectedLesson] = useState(null); | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					  return ( | 
					 | 
					 | 
					 | 
					  return ( | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					    <section style={{ width: "30%" }} className="bg-white mx-auto my-20 p-4"> | 
					 | 
					 | 
					 | 
					    <section style={{ width: "30%" }} className="bg-white mx-auto my-20 p-4"> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					      <div | 
					 | 
					 | 
					 | 
					      <div | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					 | 
					@ -21,41 +23,79 @@ const CourseChapter = ({ chapters }) => { | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        <div className="border-b border-blue-300 bg-opacity-10 my-5"></div> | 
					 | 
					 | 
					 | 
					        <div className="border-b border-blue-300 bg-opacity-10 my-5"></div> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        {/* course title */} | 
					 | 
					 | 
					 | 
					        {/* course title */} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        {chapters.map((chapter, index) => ( | 
					 | 
					 | 
					 | 
					        {chapters.map((chapter, index) => ( | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					          <div className="flex flex-col"> | 
					 | 
					 | 
					 | 
					          <div className="flex flex-col" key={index}> | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					            <div className="bg-blue-600 rounded-sm p-4 flex flex-row items-center justify-between"> | 
					 | 
					 | 
					 | 
					            <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> | 
					 | 
					 | 
					 | 
					              <p className="text-sm text-white">{chapter.title}</p> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					              <span className="text-sm text-white">{chapter.duration}</span> | 
					 | 
					 | 
					 | 
					              <span className="text-sm text-white">{chapter.duration}</span> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					            </div> | 
					 | 
					 | 
					 | 
					            </div> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					            {chapter.lessons.map((lesson, index) => ( | 
					 | 
					 | 
					 | 
					            {/* course lessons */} | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					              <div className="flex flex-row items-center justify-around mt-3"> | 
					 | 
					 | 
					 | 
					            {chapter.lessons.map((lesson, i) => ( | 
				
			
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					              <div | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					                className="flex flex-row items-center justify-around" | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					                key={i} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					              > | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                {/* right div dot dot */} | 
					 | 
					 | 
					 | 
					                {/* right div dot dot */} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                <div className="bg-yellow-100" style={{ width: "10%" }}> | 
					 | 
					 | 
					 | 
					                <div | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                  mahdi | 
					 | 
					 | 
					 | 
					                  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> | 
					 | 
					 | 
					 | 
					                </div> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                {/* left div content  */} | 
					 | 
					 | 
					 | 
					                {/* left div content  */} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                <div style={{ width: "80%" }}> | 
					 | 
					 | 
					 | 
					                <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 */} | 
					 | 
					 | 
					 | 
					                  {/* 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-2"> | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                    <div className="flex flex-row items-center justify-between"> | 
					 | 
					 | 
					 | 
					                    <p | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                      <p className="text-sm text-blue-500">{lesson.title}</p> | 
					 | 
					 | 
					 | 
					                      className={`text-sm text-blue-500 group-hover:text-white
 | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                      <span className="text-xs text-blue-500 border-r-2 pr-1"> | 
					 | 
					 | 
					 | 
					                      ${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} | 
					 | 
					 | 
					 | 
					                      {lesson.duration} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                    </span> | 
					 | 
					 | 
					 | 
					                    </span> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                  </div> | 
					 | 
					 | 
					 | 
					                  </div> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                  </div> | 
					 | 
					 | 
					 | 
					                  {/* divider */} | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					                  <div | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					                    className={`border-t border-blue-600 group-hover:border-white ${ | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					                      selectedLesson === lesson ? "border-red-600" : "" | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					                    }`}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					                  ></div> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                  {/* bottom */} | 
					 | 
					 | 
					 | 
					                  {/* bottom */} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                  <div className="bg-white border border-blue-600 p-2 flex flex-col rounded-br-md rounded-bl-md"> | 
					 | 
					 | 
					 | 
					                  <span | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                    <span className="text-xs text-center text-blue-500"> | 
					 | 
					 | 
					 | 
					                    className={`text-xs text-center text-blue-500 group-hover:text-white p-2
 | 
				
			
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					                  ${selectedLesson === lesson ? "text-red-600" : ""}`}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					                  > | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                    {lesson.play} | 
					 | 
					 | 
					 | 
					                    {lesson.play} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                  </span> | 
					 | 
					 | 
					 | 
					                  </span> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					                </div> | 
					 | 
					 | 
					 | 
					                </div> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					              </div> | 
					 | 
					 | 
					 | 
					              </div> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					              </div> | 
					 | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					            ))} | 
					 | 
					 | 
					 | 
					            ))} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					          </div> | 
					 | 
					 | 
					 | 
					          </div> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        ))} | 
					 | 
					 | 
					 | 
					        ))} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        {/* blue border left */} | 
					 | 
					 | 
					 | 
					        {/* blue left border */} | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        <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 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> | 
					 | 
					 | 
					 | 
					      </div> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					    </section> | 
					 | 
					 | 
					 | 
					    </section> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					  ); | 
					 | 
					 | 
					 | 
					  ); | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					 | 
					@ -69,7 +109,30 @@ CourseChapter.defaultProps = { | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					      title: "فصل اول: مباحث جوشش مواد مذاب در مرکز", | 
					 | 
					 | 
					 | 
					      title: "فصل اول: مباحث جوشش مواد مذاب در مرکز", | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					      duration: "2:30:13", | 
					 | 
					 | 
					 | 
					      duration: "2:30:13", | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					      lessons: [ | 
					 | 
					 | 
					 | 
					      lessons: [ | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        { title: "آیا گوگل از ما دزدی میکند؟", duration: "14:30", play: "پخش" }, | 
					 | 
					 | 
					 | 
					        { | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					          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, | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					        }, | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					      ], | 
					 | 
					 | 
					 | 
					      ], | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					    }, | 
					 | 
					 | 
					 | 
					    }, | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					  ], | 
					 | 
					 | 
					 | 
					  ], | 
				
			
			
		
	
	
		
		
			
				
					| 
						
							
								
							
						
						
						
					 | 
					 | 
					
  |