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.
 
 
 

67 lines
2.1 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";
import arrowWhiteIcon from "../../../../../assets/icons/arrow-left-white.svg";
function Videos({ list, getList, grades, isDark }) {
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 dark:text-white font-bold text-lg">
دورههای ویدئویی شما
</strong>
<img
src={isDark ? arrowWhiteIcon : arrowBlueIcon}
alt=""
className={`transform ${isDark ? 'w-7' : '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 dark:text-white">
{book.name}
</h2>
<p className="font-medium text-blueC0 dark:text-greenBA text-xs mt-1">{`پایه ${
grades[book.gradeId]
}`}</p>
<Progress percent={60} />
</Link>
</li>
);
};
const mapStateToProps = (state) => ({
list: state.book.list,
grades: state.publicApi.grades,
isDark: state.publicApi.isDark,
});
export default connect(mapStateToProps, { getList: book.list })(Videos);