course component added

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

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

@ -22,31 +22,26 @@ 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, i) => ( {chapters.map((chapter, index) => (
<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 */} {/* course lessons */}
{chapter.lessons.map((lesson, index) => ( {chapter.lessons.map((lesson, i) => (
<div className="flex flex-row items-center justify-around"> <div className="flex flex-row items-center justify-around">
{/* right div dot dot */} {/* right div dot dot */}
<div className="flex items-center relative flex-col " style={{ width: "10%",transform: "translateY(30px)" }}> <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 <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={{
borderRight: "2px dotted yellow", transform: "translateX(-1px)",height:"65px"
}} }}
></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> ></span>
</div> </div>
{/* left div content */} {/* left div content */}
@ -99,25 +94,25 @@ CourseChapter.defaultProps = {
title: "آیا گوگل از ما دزدی میکند؟", title: "آیا گوگل از ما دزدی میکند؟",
duration: "14:30", duration: "14:30",
play: "پخش", play: "پخش",
// step : true, passed : true,
}, },
{ {
title: "چگونگی ساخت نیروگاه های برقی", title: "چگونگی ساخت نیروگاه های برقی",
duration: "22:31", duration: "22:31",
play: "در حال پخش", play: "در حال پخش",
// step : false, passed : true,
}, },
{ {
title: "آیا از اینترنت می توان درآمد داشت؟", title: "آیا از اینترنت می توان درآمد داشت؟",
duration: "10:09", duration: "10:09",
play: "نمایش", play: "نمایش",
// step : false, passed : false,
}, },
{ {
title: "زمین سبز و آسمان آبی", title: "زمین سبز و آسمان آبی",
duration: "56:09", duration: "56:09",
play: "نمایش", play: "نمایش",
// step : false, passed : false,
}, },
], ],
}, },

Loading…
Cancel
Save