You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

159 lines
6.7 KiB

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);