|
|
import React, { useEffect } from "react"; |
|
|
import { Link } from "react-router-dom"; |
|
|
import { connect } from "react-redux"; |
|
|
import { book } from "../../../../../redux/actions"; |
|
|
import Progress from "../../../../../components/Progress"; |
|
|
import arrowBlueIcon from "../../../../../assets/icons/arrow-right-blue.svg"; |
|
|
|
|
|
function Videos({ list, getList, grades }) { |
|
|
useEffect(() => { |
|
|
getList(); |
|
|
}, []); |
|
|
return ( |
|
|
<div className="w-full px-4"> |
|
|
<div className="w-full flex flex-col rounded-md py-4 overflow-hidden"> |
|
|
<header className="w-full flex flex-row justify-between items-center"> |
|
|
<strong className="text-blueC0 font-bold text-lg">دورههای ویدئویی شما</strong> |
|
|
<img src={arrowBlueIcon} alt="" className="transform rotate-180" /> |
|
|
</header> |
|
|
<ul |
|
|
className="list-none w-full overflow-x-scroll pt-3 flex flex-row" |
|
|
> |
|
|
{list.map((book, index) => ( |
|
|
<Book |
|
|
book={book} |
|
|
key={index} |
|
|
grades={grades} |
|
|
/> |
|
|
))} |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
} |
|
|
|
|
|
const Book = ({ book, grades }) => { |
|
|
return ( |
|
|
<li className="flex flex-col ml-3"> |
|
|
<Link to={"/products/" + book.name}> |
|
|
<img |
|
|
src={`https://dnvn.ir/api/v1/file/${book.fileIds}`} |
|
|
alt="" |
|
|
className="rounded-sm" |
|
|
style={{ |
|
|
maxHeight: "calc(100vw / 2 * 2 / 3)", |
|
|
minWidth: "calc(100vw / 2 )", |
|
|
}} |
|
|
/> |
|
|
<h2 className="mt-2 text-sm font-semibold text-blue5F">{book.name}</h2> |
|
|
<p className="font-medium text-blueC0 text-xs mt-1">{`پایه ${grades[book.gradeId]}`}</p> |
|
|
<Progress percent={60} /> |
|
|
</Link> |
|
|
</li> |
|
|
); |
|
|
}; |
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
list: state.book.list, |
|
|
grades : state.publicApi.grades |
|
|
|
|
|
}); |
|
|
|
|
|
export default connect(mapStateToProps, { getList: book.list })(Videos);
|
|
|
|