|
|
@ -1,14 +1,23 @@ |
|
|
|
import React from "react"; |
|
|
|
import React from "react"; |
|
|
|
import { Link } from "react-router-dom"; |
|
|
|
import { Link, useNavigate } from "react-router-dom"; |
|
|
|
import { connect } from "react-redux"; |
|
|
|
import { connect } from "react-redux"; |
|
|
|
import { ScrollingCarousel } from "@trendyol-js/react-carousel"; |
|
|
|
import { ScrollingCarousel } from "@trendyol-js/react-carousel"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//components
|
|
|
|
import Progress from "../../../../../components/Progress"; |
|
|
|
import Progress from "../../../../../components/Progress"; |
|
|
|
|
|
|
|
import Modal from "../../../../../components/Modal"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//assets
|
|
|
|
|
|
|
|
import exitImage from "../../../../../assets/icons/exit.svg"; |
|
|
|
|
|
|
|
|
|
|
|
function MyBooks({ books, grades, isMobile }) { |
|
|
|
function MyBooks({ books, grades, isMobile }) { |
|
|
|
const Book = ({ book }) => { |
|
|
|
const [selectedModal, setSelectedModal] = React.useState(null); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const Book = React.useCallback( |
|
|
|
|
|
|
|
({ book }) => { |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<li className=" flex flex-col lg:ml-6 lg:p-2 lg:border lg:border-solid lg:border-green-200 lg:rounded-md lg:pt-4"> |
|
|
|
<li className=" flex flex-col lg:ml-6 lg:p-2 lg:border lg:border-solid lg:border-green-200 lg:rounded-md lg:pt-4"> |
|
|
|
<Link to={"/products/" + book.id}> |
|
|
|
<div onClick={() => setSelectedModal(book?.id)}> |
|
|
|
<img |
|
|
|
<img |
|
|
|
src={`https://dnvn.ir/api/v1/file/${book.fileIds}`} |
|
|
|
src={`https://dnvn.ir/api/v1/file/${book.fileIds}`} |
|
|
|
alt="" |
|
|
|
alt="" |
|
|
@ -22,6 +31,7 @@ function MyBooks({ books, grades, isMobile }) { |
|
|
|
maxWidth: isMobile ? 70 : "", |
|
|
|
maxWidth: isMobile ? 70 : "", |
|
|
|
}} |
|
|
|
}} |
|
|
|
/> |
|
|
|
/> |
|
|
|
|
|
|
|
|
|
|
|
<h2 className="mt-2 text-tiny lg:text-tiny font-semibold text-blue5F dark:text-white lg:mt-4"> |
|
|
|
<h2 className="mt-2 text-tiny lg:text-tiny font-semibold text-blue5F dark:text-white lg:mt-4"> |
|
|
|
{book.name} |
|
|
|
{book.name} |
|
|
|
</h2> |
|
|
|
</h2> |
|
|
@ -29,10 +39,45 @@ function MyBooks({ books, grades, isMobile }) { |
|
|
|
grades[book.gradeId] |
|
|
|
grades[book.gradeId] |
|
|
|
}`}</p>
|
|
|
|
}`}</p>
|
|
|
|
<Progress percent={60} direction="float-right" /> |
|
|
|
<Progress percent={60} direction="float-right" /> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<Modal |
|
|
|
|
|
|
|
open={selectedModal === book?.id} |
|
|
|
|
|
|
|
onClose={() => setSelectedModal(null)} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<div |
|
|
|
|
|
|
|
className="w-2/3 rounded-md flex flex-col items-center p-2 gap-3 bg-white relative" |
|
|
|
|
|
|
|
onClick={(e) => e.stopPropagation()} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<img |
|
|
|
|
|
|
|
src={exitImage} |
|
|
|
|
|
|
|
alt="خروج" |
|
|
|
|
|
|
|
className="p-2 rounded-full w-8 bg-white absolute right-1 -top-6" |
|
|
|
|
|
|
|
onClick={() => setSelectedModal(null)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<img |
|
|
|
|
|
|
|
src={`https://dnvn.ir/api/v1/file/${book.fileIds}`} |
|
|
|
|
|
|
|
alt={book?.name} |
|
|
|
|
|
|
|
className="w-full object-cover" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<Link |
|
|
|
|
|
|
|
to={"/scan"} |
|
|
|
|
|
|
|
className="w-full text-center py-3 bg-blueC0 text-white font-medium rounded-sm text-tiny" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
اسکن کد QR |
|
|
|
</Link> |
|
|
|
</Link> |
|
|
|
|
|
|
|
<a |
|
|
|
|
|
|
|
href={`https://ar.dnvn.ir/lunch?id=${book.id}`} |
|
|
|
|
|
|
|
className="w-full text-center py-3 bg-gray-400 text-white font-medium rounded-sm text-tiny" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
واقعیت افزوده |
|
|
|
|
|
|
|
</a> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</Modal> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
); |
|
|
|
); |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
[isMobile, grades, books, selectedModal] |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div className="px-4 mb-5 lg:mb-0" style={{ maxWidth: "100%" }}> |
|
|
|
<div className="px-4 mb-5 lg:mb-0" style={{ maxWidth: "100%" }}> |
|
|
@ -40,21 +85,18 @@ function MyBooks({ books, grades, isMobile }) { |
|
|
|
<strong className="text-green7B dark:text-white font-bold text-base lg:text-base mb-2"> |
|
|
|
<strong className="text-green7B dark:text-white font-bold text-base lg:text-base mb-2"> |
|
|
|
کتابهای من |
|
|
|
کتابهای من |
|
|
|
</strong> |
|
|
|
</strong> |
|
|
|
{isMobile ? ( |
|
|
|
<ul className=" list-none w-full overflow-x-scroll pt-2 flex lg:hidden lg:pt-5 lg:flex-wrap lg:overflow-y-scroll gap-3 lg:gap-10 no-scrollbar"> |
|
|
|
<ul className="list-none w-full overflow-x-scroll pt-2 flex lg:pt-5 lg:flex-wrap lg:overflow-y-scroll gap-3 lg:gap-10 no-scrollbar"> |
|
|
|
|
|
|
|
{books?.slice(0, 5)?.map((book, index) => ( |
|
|
|
{books?.slice(0, 5)?.map((book, index) => ( |
|
|
|
<Book book={book} key={index} /> |
|
|
|
<Book book={book} key={index} /> |
|
|
|
))} |
|
|
|
))} |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
) : ( |
|
|
|
<div className="hidden lg:flex w-full scrolling-carousel mt-4 pb-2"> |
|
|
|
<div className="w-full scrolling-carousel mt-4 pb-2"> |
|
|
|
|
|
|
|
<ScrollingCarousel className="py-3"> |
|
|
|
<ScrollingCarousel className="py-3"> |
|
|
|
{books?.map((book, index) => ( |
|
|
|
{books?.map((book, index) => ( |
|
|
|
<Book book={book} key={index} /> |
|
|
|
<Book book={book} key={index} /> |
|
|
|
))} |
|
|
|
))} |
|
|
|
</ScrollingCarousel> |
|
|
|
</ScrollingCarousel> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
)} |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
); |
|
|
|