Reza_ashrafi
3 years ago
|
Before Width: | Height: | Size: 668 B After Width: | Height: | Size: 668 B |
|
After Width: | Height: | Size: 751 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 750 B |
|
Before Width: | Height: | Size: 800 B After Width: | Height: | Size: 800 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 985 B |
|
Before Width: | Height: | Size: 988 B After Width: | Height: | Size: 988 B |
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,31 @@ |
||||
import React, { useState, useEffect } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { publicApi } from "../../redux/actions"; |
||||
import Book from "./layouts/Book"; |
||||
|
||||
function AR({ getArList, arList, headerOptions, setHeaderOptions }) { |
||||
|
||||
useEffect(() => { |
||||
setHeaderOptions(headerOptions); |
||||
getArList(); |
||||
|
||||
}, []); |
||||
|
||||
return ( |
||||
<div className="flex flex-col flex-1 gap-4 px-4"> |
||||
{arList.length > 0 && |
||||
arList.map((book, index) => <Book book={book} key={index} />)} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
arList: state.publicApi.arList, |
||||
}); |
||||
|
||||
const mapDispatchToProps = { |
||||
getArList: publicApi.getArList, |
||||
setHeaderOptions : publicApi.setHeaderOptions, |
||||
}; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(AR); |
||||
@ -0,0 +1,25 @@ |
||||
import React from "react"; |
||||
|
||||
const Book = ({ book }) => { |
||||
return ( |
||||
<a |
||||
href={`https://ar.dnvn.ir/lunch?id=${book.id}`} |
||||
target="_blank" |
||||
className="w-full flex flex-row rounded-md p-2 shadow-lg" |
||||
> |
||||
<img |
||||
src={`https://dnvn.ir/api/v1/file/${book.fileId}`} |
||||
className="rounded-md" |
||||
style={{ |
||||
width: "calc(100vh / 10)", |
||||
height: "calc(100vh / 10 * 3 / 2)", |
||||
}} |
||||
/> |
||||
<storng className="mr-2 mt-2 text-tiny text-blue5F font-semibold"> |
||||
{book.title} |
||||
</storng> |
||||
</a> |
||||
); |
||||
}; |
||||
|
||||
export default Book; |
||||
@ -0,0 +1,47 @@ |
||||
import React from "react"; |
||||
|
||||
const persian = { |
||||
weight: "وزن", |
||||
pageNumber: "تعداد صفحات", |
||||
pageType: "نوع کاغذ", |
||||
bookNumber: "شماره شابک", |
||||
publisher: "انتشارات", |
||||
author: "نویسنده", |
||||
bookType: "قطع", |
||||
publishedYear: "سال انتشار", |
||||
}; |
||||
|
||||
const Table = ({ specifications }) => { |
||||
return ( |
||||
<ul className="w-full"> |
||||
{Object.keys(specifications).map((specification, index) => ( |
||||
<li className="flex my-3"> |
||||
<div |
||||
className="bg-grayF9 rounded p-3 ml-2 text-blue-600 text-sm" |
||||
style={{ flex: 2 }} |
||||
> |
||||
{persian[specification]} |
||||
</div> |
||||
<div className="bg-grayF9 rounded p-3 text-sm" style={{ flex: 8 }}> |
||||
{specifications[specification]} |
||||
</div> |
||||
</li> |
||||
))} |
||||
</ul> |
||||
); |
||||
}; |
||||
|
||||
export default Table; |
||||
|
||||
Table.defaultProps = { |
||||
specifications: { |
||||
weight: "1 کیلوگرم", |
||||
pageNumber: "400 صفحه", |
||||
pageType: "گلاسه", |
||||
bookNumber: "124900985340561870112312499", |
||||
publisher: "رزمندگان", |
||||
author: "یک نویسنده گمنام", |
||||
bookType: "خشتی", |
||||
publishedYear: "1399", |
||||
}, |
||||
}; |
||||