course cha[ter component added

master
mahdi 3 years ago
parent 6092ba0c1b
commit 87deec2067
  1. 2
      src/App.js
  2. 48
      src/components/CourseChapter/index.js

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

@ -1,10 +1,10 @@
import React from "react"; import React from "react";
const CourseChapter = () => { const CourseChapter = ({ chapters }) => {
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
className="rounded py-2 px-4" className="rounded py-5 px-4"
style={{ backgroundColor: "#196EC033" }} style={{ backgroundColor: "#196EC033" }}
> >
{/* top */} {/* top */}
@ -20,10 +20,40 @@ const CourseChapter = () => {
{/* 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 */}
<div className="bg-blue-800 rounded"> {chapters.map((chapter, index) => (
<h2>فصل اول: مباحث جوشش مواد مذاب در مرکز</h2> <div className="flex flex-col">
<p>2:30:13</p> <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> </div>
{chapter.lessons.map((lesson, index) => (
<div className="flex flex-row items-center justify-around mt-3">
{/* right div dot dot */}
<div className="bg-yellow-100" style={{ width: "10%" }}>
mahdi
</div>
{/* left div content */}
<div style={{ width: "80%" }}>
{/* 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 className="text-sm text-blue-500">{lesson.title}</p>
<span className="text-xs text-blue-500">
{lesson.duration}
</span>
</div>
</div>
{/* bottom */}
<div className="bg-white border border-blue-600 p-2 flex flex-col rounded-br-md rounded-bl-md">
<span className="text-xs text-center text-blue-500">
{lesson.play}
</span>
</div>
</div>
</div>
))}
</div>
))}
</div> </div>
</section> </section>
); );
@ -34,9 +64,11 @@ export default CourseChapter;
CourseChapter.defaultProps = { CourseChapter.defaultProps = {
chapters: [ chapters: [
{ {
title: "", title: "فصل اول: مباحث جوشش مواد مذاب در مرکز",
duration: "", duration: "2:30:13",
lessons: [{ title: "", duration: "", play: "" }], lessons: [
{ title: "آیا گوگل از ما دزدی میکند؟", duration: "14:30", play: "پخش" },
],
}, },
], ],
}; };

Loading…
Cancel
Save