|  |  |  | @ -22,29 +22,24 @@ const CourseChapter = ({ chapters }) => { | 
			
		
	
		
			
				
					|  |  |  |  |         {/* divider */} | 
			
		
	
		
			
				
					|  |  |  |  |         <div className="border-b border-blue-300 bg-opacity-10 my-5"></div> | 
			
		
	
		
			
				
					|  |  |  |  |         {/* course title */} | 
			
		
	
		
			
				
					|  |  |  |  |         {chapters.map((chapter, i) => ( | 
			
		
	
		
			
				
					|  |  |  |  |         {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> | 
			
		
	
		
			
				
					|  |  |  |  |             {/* course lessons */} | 
			
		
	
		
			
				
					|  |  |  |  |             {chapter.lessons.map((lesson, index) => ( | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |             {chapter.lessons.map((lesson, i) => ( | 
			
		
	
		
			
				
					|  |  |  |  |               <div className="flex flex-row items-center justify-around"> | 
			
		
	
		
			
				
					|  |  |  |  |                 {/* 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"} | 
			
		
	
		
			
				
					|  |  |  |  |                     ${selectedLesson === lesson ? "bg-red-600" : "bg-blue-600"}, | 
			
		
	
		
			
				
					|  |  |  |  |                     ${lesson.passed ? "bg-red-600" : "bg-blue-600"} | 
			
		
	
		
			
				
					|  |  |  |  |                   `}
 | 
			
		
	
		
			
				
					|  |  |  |  |                     style={{ | 
			
		
	
		
			
				
					|  |  |  |  |                       // backgroundColor: lesson.currentStep = true ? "yellow" : "pink",
 | 
			
		
	
		
			
				
					|  |  |  |  |                     }} | 
			
		
	
		
			
				
					|  |  |  |  |                   ></div> | 
			
		
	
		
			
				
					|  |  |  |  |                   <span className="w-1" | 
			
		
	
		
			
				
					|  |  |  |  |                   style={{ | 
			
		
	
		
			
				
					|  |  |  |  |                     // borderColor:
 | 
			
		
	
		
			
				
					|  |  |  |  |                     // lesson.currentStep = true ? "2px dotted yellow" : "2px dotted pink",
 | 
			
		
	
		
			
				
					|  |  |  |  |                   > | 
			
		
	
		
			
				
					|  |  |  |  |                   </div> | 
			
		
	
		
			
				
					|  |  |  |  |                   <span className="w-1" style={{ | 
			
		
	
		
			
				
					|  |  |  |  |                         borderRight: "2px dotted yellow", transform: "translateX(-1px)",height:"65px" | 
			
		
	
		
			
				
					|  |  |  |  |                     }} | 
			
		
	
		
			
				
					|  |  |  |  |                   ></span> | 
			
		
	
	
		
			
				
					|  |  |  | @ -99,25 +94,25 @@ CourseChapter.defaultProps = { | 
			
		
	
		
			
				
					|  |  |  |  |           title: "آیا گوگل از ما دزدی میکند؟", | 
			
		
	
		
			
				
					|  |  |  |  |           duration: "14:30", | 
			
		
	
		
			
				
					|  |  |  |  |           play: "پخش", | 
			
		
	
		
			
				
					|  |  |  |  |           // step : true,
 | 
			
		
	
		
			
				
					|  |  |  |  |           passed : true, | 
			
		
	
		
			
				
					|  |  |  |  |         }, | 
			
		
	
		
			
				
					|  |  |  |  |         { 
 | 
			
		
	
		
			
				
					|  |  |  |  |           title: "چگونگی ساخت نیروگاه های برقی", 
 | 
			
		
	
		
			
				
					|  |  |  |  |           duration: "22:31", 
 | 
			
		
	
		
			
				
					|  |  |  |  |           play: "در حال پخش", | 
			
		
	
		
			
				
					|  |  |  |  |           // step : false,
 | 
			
		
	
		
			
				
					|  |  |  |  |           passed : true, | 
			
		
	
		
			
				
					|  |  |  |  |         }, | 
			
		
	
		
			
				
					|  |  |  |  |         { 
 | 
			
		
	
		
			
				
					|  |  |  |  |           title: "آیا از اینترنت می توان درآمد داشت؟", 
 | 
			
		
	
		
			
				
					|  |  |  |  |           duration: "10:09", 
 | 
			
		
	
		
			
				
					|  |  |  |  |           play: "نمایش", | 
			
		
	
		
			
				
					|  |  |  |  |           // step : false,
 | 
			
		
	
		
			
				
					|  |  |  |  |           passed : false, | 
			
		
	
		
			
				
					|  |  |  |  |         }, | 
			
		
	
		
			
				
					|  |  |  |  |         {  
 | 
			
		
	
		
			
				
					|  |  |  |  |           title: "زمین سبز و آسمان آبی", 
 | 
			
		
	
		
			
				
					|  |  |  |  |           duration: "56:09", 
 | 
			
		
	
		
			
				
					|  |  |  |  |           play: "نمایش", | 
			
		
	
		
			
				
					|  |  |  |  |           // step : false,        
 | 
			
		
	
		
			
				
					|  |  |  |  |           passed : false,        
 | 
			
		
	
		
			
				
					|  |  |  |  |         }, | 
			
		
	
		
			
				
					|  |  |  |  |       ], | 
			
		
	
		
			
				
					|  |  |  |  |     }, | 
			
		
	
	
		
			
				
					|  |  |  | 
 |