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