master
mahdi andalib 3 years ago
parent d10f1431fb
commit c7d7fde54f
  1. 2
      src/App.js
  2. 89
      src/components/CourseChapter/index.js

@ -63,7 +63,7 @@ function App() {
{/* <Alert /> */} {/* <Alert /> */}
{/* <Toast /> */} {/* <Toast /> */}
{/* <ProductSuggestion /> */} {/* <ProductSuggestion /> */}
{/* <ProductImage /> */} <ProductImage />
{/* <ProductTab /> */} {/* <ProductTab /> */}
{/* <ProductStatusCard /> */} {/* <ProductStatusCard /> */}
{/* <AdvertisementDesign1 /> */} {/* <AdvertisementDesign1 /> */}

@ -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
@ -20,40 +22,65 @@ const CourseChapter = ({ chapters }) => {
{/* divider */} {/* divider */}
<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, i) => (
<div className="flex flex-col"> <div className="flex flex-col">
<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>
{/* course lessons */}
{chapter.lessons.map((lesson, index) => ( {chapter.lessons.map((lesson, index) => (
<div className="flex flex-row items-center justify-around mt-3">
<div className="flex flex-row items-center justify-around">
{/* right div dot dot */} {/* right div dot dot */}
<div className="bg-yellow-100" style={{ width: "10%" }}> <div className="flex items-center relative flex-col " style={{ width: "10%",transform: "translateY(30px)" }}>
mahdi <div className={`flex justify-center items-center w-4 h-4 rounded-full
${selectedLesson === lesson ? "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",
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 className={`text-sm text-blue-500 group-hover:text-white
<p className="text-sm text-blue-500">{lesson.title}</p> ${selectedLesson === lesson ? "text-red-600" : ""}`}
<span className="text-xs text-blue-500"> >
{lesson.duration} {lesson.title}
</span> </p>
</div> <span className={`text-xs text-blue-500 group-hover:text-white border-r border-blue-200 pr-1
</div> ${selectedLesson === lesson ? "text-red-600" : ""}`}
{/* bottom */} >
<div className="bg-white border border-blue-600 p-2 flex flex-col rounded-br-md rounded-bl-md"> {lesson.duration}
<span className="text-xs text-center text-blue-500">
{lesson.play}
</span> </span>
</div> </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> </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 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>
@ -68,8 +95,32 @@ CourseChapter.defaultProps = {
title: "فصل اول: مباحث جوشش مواد مذاب در مرکز", title: "فصل اول: مباحث جوشش مواد مذاب در مرکز",
duration: "2:30:13", duration: "2:30:13",
lessons: [ lessons: [
{ title: "آیا گوگل از ما دزدی میکند؟", duration: "14:30", play: "پخش" }, {
title: "آیا گوگل از ما دزدی میکند؟",
duration: "14:30",
play: "پخش",
// step : true,
},
{
title: "چگونگی ساخت نیروگاه های برقی",
duration: "22:31",
play: "در حال پخش",
// step : false,
},
{
title: "آیا از اینترنت می توان درآمد داشت؟",
duration: "10:09",
play: "نمایش",
// step : false,
},
{
title: "زمین سبز و آسمان آبی",
duration: "56:09",
play: "نمایش",
// step : false,
},
], ],
}, },
], ],
}; };

Loading…
Cancel
Save