course component added

master
mahdi andalib 3 years ago
parent c7d7fde54f
commit 2609590cd3
  1. 10
      src/App.js
  2. 27
      src/components/CourseChapter/index.js

@ -63,12 +63,12 @@ function App() {
{/* <Alert /> */}
{/* <Toast /> */}
{/* <ProductSuggestion /> */}
<ProductImage />
{/* <ProductImage /> */}
{/* <ProductTab /> */}
{/* <ProductStatusCard /> */}
{/* <AdvertisementDesign1 /> */}
{/* <AdvertisementDesign2 /> */}
{/* <AdvertisementDesign3 /> */}
<ProductStatusCard />
<AdvertisementDesign1 />
<AdvertisementDesign2 />
<AdvertisementDesign3 />
<CourseChapter />
</div>
</Provider>

@ -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,
},
],
},

Loading…
Cancel
Save