|
|
import React, { useState, useEffect } from "react"; |
|
|
import axios from "axios"; |
|
|
import Navbar from "../../components/Navbar/index"; |
|
|
import Footer from "../../views/Home/Footer/index"; |
|
|
import BreadCrumbs from "../../components/BreadCrumbs"; |
|
|
import Lesson from "./Lesson/index"; |
|
|
import { Link } from "react-router-dom"; |
|
|
import chat from "../../assets/icons/chat.png"; |
|
|
import slide from "../../assets/icons/slide.png"; |
|
|
import play from "../../assets/icons/play.png"; |
|
|
import bookmark from "../../assets/icons/bookmark.png"; |
|
|
import StyledRating from "../../components/StyledRating/index"; |
|
|
import { connect } from "react-redux"; |
|
|
import { book } from "../../redux/actions"; |
|
|
import scroll from "../../util/scroll"; |
|
|
|
|
|
import "./index.scss"; |
|
|
|
|
|
function Course({ lessons, getInfo, info }: any) { |
|
|
const [links, setLinks] = useState([ |
|
|
{ link: "/", name: "صفحه اصلی" }, |
|
|
{ link: "/courses", name: "دورهها" }, |
|
|
{ link: "/courses/2", name: "نام کتاب" }, |
|
|
]); |
|
|
const [course, setCourse] = useState<any>(undefined); |
|
|
useEffect(() => { |
|
|
scroll.goToTop(); |
|
|
getInfo({ |
|
|
bookId: 1 |
|
|
// window.location.pathname.slice( |
|
|
// window.location.pathname.lastIndexOf("/") + 1, |
|
|
// window.location.pathname.length |
|
|
// ), |
|
|
}); |
|
|
}, []); |
|
|
|
|
|
return ( |
|
|
<div className="course main d-flex flex-column"> |
|
|
<Navbar /> |
|
|
<main> |
|
|
<header className="course__header desktop align-items-end"> |
|
|
<div className="course__info d-flex"> |
|
|
<div className="course__info--image d-flex align-items-end"> |
|
|
<img src={`https://dnvn.ir/api/v1/file/${info?.fileIds}`} alt="" /> |
|
|
</div> |
|
|
<div className="course__info--description d-flex flex-column justify-content-between"> |
|
|
<div> |
|
|
<BreadCrumbs links={links} /> |
|
|
<h1>{info?.name}</h1> |
|
|
</div> |
|
|
<div className="d-flex justify-content-between"> |
|
|
<div className="course-info-items d-flex align-items-center justify-content-around"> |
|
|
<img src={slide} alt="" /> |
|
|
<div className="d-flex flex-column"> |
|
|
<i>{240} ساعت درس </i> |
|
|
<p>در این قسمت توضیحی</p> |
|
|
</div> |
|
|
</div> |
|
|
<div className="course-info-items d-flex align-items-center justify-content-around"> |
|
|
<img src={chat} alt="" /> |
|
|
<div className="d-flex flex-column"> |
|
|
<i>ارتباط با استاد</i> |
|
|
<p>در این قسمت توضیحی</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div className="course__options d-flex flex-column align-items-end justify-content-end"> |
|
|
<div className="course__options--rate d-flex flex-column align-items-center justify-content-start"> |
|
|
<div className="course__options--rate__number d-flex align-items-center"> |
|
|
<div> |
|
|
<b>10</b> |
|
|
<i>/2</i> |
|
|
</div> |
|
|
<span>از 288 رای</span> |
|
|
</div> |
|
|
<StyledRating /> |
|
|
<h2>میانگین رای کاربران</h2> |
|
|
</div> |
|
|
<button className="course__options--button d-flex align-items-center justify-content-between"> |
|
|
اضافه کردن به علاقهمندیها |
|
|
<img src={bookmark} alt="" /> |
|
|
</button> |
|
|
<Link |
|
|
to="/video-tube" |
|
|
className="course__options--button d-flex align-items-center justify-content-between" |
|
|
> |
|
|
مشاهده پیشنمایش دوره |
|
|
<img src={play} alt="" /> |
|
|
</Link> |
|
|
</div> |
|
|
</header> |
|
|
<header className="mobile flex-column"> |
|
|
<div className="course__info d-flex"> |
|
|
<div className="course__info--image d-flex align-items-end"> |
|
|
<img src={`https://dnvn.ir/api/v1/file/${info?.fileIds}`} alt="" /> |
|
|
</div> |
|
|
<div className="course__info--description d-flex flex-column justify-content-between"> |
|
|
<BreadCrumbs links={links} /> |
|
|
<h1>{info?.name}</h1> |
|
|
<i>240 ساعت</i> |
|
|
<div className="course__options--rate d-flex align-items-center justify-content-between"> |
|
|
<div className="course__options--rate__number d-flex flex-column align-items-center"> |
|
|
<h2>میانگین رای کاربران</h2> |
|
|
<div> |
|
|
<b>10</b> |
|
|
<i>/2</i> |
|
|
</div> |
|
|
</div> |
|
|
<StyledRating /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div className="course__options d-flex align-items-center justify-content-between"> |
|
|
<button className="course__options--button d-flex align-items-center justify-content-around"> |
|
|
اضافه کردن به علاقهمندیها |
|
|
<img src={bookmark} alt="" /> |
|
|
</button> |
|
|
<Link |
|
|
to="/video-tube" |
|
|
className="course__options--button d-flex align-items-center justify-content-around" |
|
|
> |
|
|
مشاهده پیشنمایش دوره |
|
|
<img src={play} alt="" /> |
|
|
</Link> |
|
|
</div> |
|
|
<p> |
|
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با |
|
|
استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در |
|
|
ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و |
|
|
کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی |
|
|
در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را |
|
|
می طلبد تا با نرم افزارها شناخت بیشتری دارد. |
|
|
</p> |
|
|
</header> |
|
|
|
|
|
<section className="course__list d-flex flex-column"> |
|
|
<header className="course__list--header"> |
|
|
<h2>سر فصل دوره</h2> |
|
|
<p>در این قسمت شاید یک متن جهت زیباسازی قرار بگیرد </p> |
|
|
</header> |
|
|
{lessons.map((lesson: any, i: any) => ( |
|
|
<Lesson key={i} lesson={lesson} /> |
|
|
))} |
|
|
</section> |
|
|
</main> |
|
|
<Footer /> |
|
|
</div> |
|
|
); |
|
|
} |
|
|
|
|
|
export default connect( |
|
|
(state: any) => ({ |
|
|
lessons: state.book.mockLessons, |
|
|
info : state.book.info, |
|
|
}), |
|
|
{ getInfo: book.info } |
|
|
)(Course);
|
|
|
|