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.
 
 
 

62 lines
1.9 KiB

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