mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
master
mahdi 3 years ago
parent dba083eac2 2609590cd3
commit 34517ac23c
2 changed files with 91 additions and 28 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      src/App.js
  2. 107
      src/components/CourseChapter/index.js

12
src/App.js
Unescape View File

@ -57,18 +57,18 @@ function App() {
{/* <ContactInfoSection /> */} {/* <ContactInfoSection /> */}
{/* <FooterDesign1 /> */} {/* <FooterDesign1 /> */}
{/* <Testttt /> */} {/* <Testttt /> */}
<Design2D /> {/* <Design2D /> */}
{/* <Features /> */} {/* <Features /> */}
{/* <Feedback /> */} {/* <Feedback /> */}
{/* <Alert /> */} {/* <Alert /> */}
{/* <Toast /> */} {/* <Toast /> */}
{/* <ProductSuggestion /> */} {/* <ProductSuggestion /> */}
{/* <ProductImage /> */} {/* <ProductImage /> */}
<ProductTab /> {/* <ProductTab /> */}
{/* <ProductStatusCard /> */} <ProductStatusCard />
{/* <AdvertisementDesign1 /> */} <AdvertisementDesign1 />
{/* <AdvertisementDesign2 /> */} <AdvertisementDesign2 />
{/* <AdvertisementDesign3 /> */} <AdvertisementDesign3 />
<CourseChapter /> <CourseChapter />
</div> </div>
</Provider> </Provider>

107
src/components/CourseChapter/index.js
Unescape View File

@ -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.duration} >
</span> {lesson.title}
</div> </p>
</div> <span
{/* bottom */} className={`text-xs text-blue-500 group-hover:text-white border-r border-blue-200 pr-1
<div className="bg-white border border-blue-600 p-2 flex flex-col rounded-br-md rounded-bl-md"> ${selectedLesson === lesson ? "text-red-600" : ""}`}
<span className="text-xs text-center text-blue-500"> >
{lesson.play} {lesson.duration}
</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 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,
},
], ],
}, },
], ],

Write Preview
Loading…
Cancel
Save