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.
 
 
 

51 lines
1.6 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';
function MyBooks({ list, getList, grades }) {
useEffect(() => {
getList();
}, []);
return (
<div className="w-full px-4 mb-5">
<div className="w-full flex flex-col rounded-md pt-4 px-2 bg-blueFF1 dark:bg-gray2077 overflow-hidden">
<strong className="text-blueC0 dark:text-white font-bold text-sm">کتابهای من</strong>
<ul className="list-none w-full overflow-x-scroll pt-2 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.id}>
<img
src={`https://dnvn.ir/api/v1/file/${book.fileIds}`}
alt=""
className="rounded-sm"
style={{
minHeight: "calc(100vh / 5)",
minWidth: "calc(100vh / 5 * 3 / 4)",
}}
/>
<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
});
export default connect(mapStateToProps, { getList: book.list })(MyBooks);