Reza_ashrafi
3 years ago
parent
881631da00
commit
3e9b2772ef
46 changed files with 567 additions and 277 deletions
|
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 |
@ -1,158 +1,172 @@ |
||||
import React, { useState } from 'react'; |
||||
|
||||
import React, { useState } from "react"; |
||||
|
||||
import moment from "jalali-moment"; |
||||
|
||||
import StarRating from "../StarRating"; |
||||
import Counter from '../Counter'; |
||||
import Button from '../Button'; |
||||
import Counter from "../Counter"; |
||||
import Button from "../Button"; |
||||
|
||||
const QandA = ({comments}) =>{ |
||||
const Comment = ({ comment }) => { |
||||
const [open, Setopen] = useState(true); |
||||
const [viewmore, setViewMore] = useState("مشاهده باسخ های بیشتر"); |
||||
const [numberOfAnswers, setNumberOfAnswers] = useState(1); |
||||
const [isOpen, setIsOpen] = useState(false) |
||||
return ( |
||||
<> |
||||
<div className="flex flex-col w-full py-6 border-t-2 border-solid border-gray-200"> |
||||
<header className="w-full flex flex-row justify-between py-1"> |
||||
<div className="flex flex-row items-end"> |
||||
|
||||
<div className="flex items-center"> |
||||
<strong className="text-lg mx-2">{comment.username}</strong> |
||||
{comment.isCostumer ? <p className='text-blueC0'>خریدار محصول</p> : null} |
||||
</div> |
||||
</div> |
||||
<div |
||||
className="flex flex-row divide-x divide-gray-300 divided items-center" |
||||
style={{ direction: "ltr" }} |
||||
> |
||||
<span className="px-2 text-sm text-blue-400"> |
||||
{moment(comment.data).locale("fa").format("YYYY/MM/DD")} |
||||
</span> |
||||
<span className="px-2 text-sm text-blue-400"> |
||||
{comment.date.getHours()} : {comment.date.getMinutes()} |
||||
</span> |
||||
const QandA = ({ comments }) => { |
||||
const Comment = ({ comment }) => { |
||||
const [open, Setopen] = useState(true); |
||||
const [viewmore, setViewMore] = useState("مشاهده باسخ های بیشتر"); |
||||
const [numberOfAnswers, setNumberOfAnswers] = useState(1); |
||||
const [isOpen, setIsOpen] = useState(false); |
||||
return ( |
||||
<> |
||||
<div className="flex flex-col w-full py-6 border-t-2 border-solid border-gray-200"> |
||||
<header className="w-full flex flex-row justify-between py-1"> |
||||
<div className="flex flex-row items-end"> |
||||
<div className="flex items-center"> |
||||
<strong className="text-lg mx-2">{comment.username}</strong> |
||||
{comment.isCostumer ? ( |
||||
<p className="text-blueC0">خریدار محصول</p> |
||||
) : null} |
||||
</div> |
||||
</header> |
||||
<div className="flex flex-row py-4"> |
||||
<div style={{ width: 60 }} className="min-h-full"></div> |
||||
<div className="flex flex-1 flex-col px-3"> |
||||
</div> |
||||
<div |
||||
className="flex flex-row divide-x divide-gray-300 divided items-center" |
||||
style={{ direction: "ltr" }} |
||||
> |
||||
<span className="px-2 text-sm text-blue-400"> |
||||
{moment(comment.data).locale("fa").format("YYYY/MM/DD")} |
||||
</span> |
||||
<span className="px-2 text-sm text-blue-400"> |
||||
{comment.date.getHours()} : |
||||
{comment.date.getMinutes()} |
||||
</span> |
||||
</div> |
||||
</header> |
||||
<div className="flex flex-row py-4"> |
||||
<div style={{ width: 60 }} className="min-h-full"></div> |
||||
<div className="flex flex-1 flex-col px-3"> |
||||
<header className="w-full flex flex-row justify-between items-center"> |
||||
<div className="flex flex-row items-center"> |
||||
<div className='py-4 px-6 bg-blue-100 text-gray-400 rounded'><h1>برسش</h1></div> |
||||
<div className="flex flex-row items-center"> |
||||
<div className="py-4 px-6 bg-blue-100 text-gray-400 rounded"> |
||||
<h1>برسش</h1> |
||||
</div> |
||||
</header> |
||||
<div className='flex items-center justify-between'> |
||||
</div> |
||||
</header> |
||||
<div className="flex items-center justify-between"> |
||||
<p className="text-gray-500 m-4">{comment.text}</p> |
||||
<Counter value={456} /> |
||||
</div> |
||||
<div className="self-end mt-4"> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
<div className="self-end mt-4"></div> |
||||
</div> |
||||
|
||||
{comment.answers.length > 0 ? comment.answers.slice(0 , numberOfAnswers).map(e => ( |
||||
<div className="flex flex-row py-1"> |
||||
<div style={{ width: 60 }} className="min-h-full"></div> |
||||
<div className="flex flex-1 flex-col px-3"> |
||||
<header className="w-full flex flex-row justify-between items-center"> |
||||
<div className="flex flex-row items-center"> |
||||
<div className='py-4 px-6 bg-green-100 text-gray-400 rounded'><h1>باسخ</h1></div> |
||||
</div> |
||||
|
||||
{comment.answers.length > 0 ? ( |
||||
comment.answers.slice(0, numberOfAnswers).map((e) => ( |
||||
<div className="flex flex-row py-1"> |
||||
<div style={{ width: 60 }} className="min-h-full"></div> |
||||
<div className="flex flex-1 flex-col px-3"> |
||||
<header className="w-full flex flex-row justify-between items-center"> |
||||
<div className="flex flex-row items-center"> |
||||
<div className="py-4 px-6 bg-green-100 text-gray-400 rounded"> |
||||
<h1>باسخ</h1> |
||||
</div> |
||||
</header> |
||||
<div className='flex items-center justify-between'> |
||||
</div> |
||||
</header> |
||||
<div className="flex items-center justify-between"> |
||||
<p className="text-gray-500 m-4">{e.text}</p> |
||||
<div> |
||||
<Counter value={456} /> |
||||
</div> |
||||
</div> |
||||
<div className="self-end mt-4"> |
||||
|
||||
<Counter value={456} /> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<div className="self-end mt-4"></div> |
||||
</div> |
||||
)) : <header className="w-full flex flex-row justify-between items-center"> |
||||
</div> |
||||
)) |
||||
) : ( |
||||
<header className="w-full flex flex-row justify-between items-center"> |
||||
<div className="flex w-4/5 flex-row items-center"> |
||||
<div className='py-4 px-6 bg-green-100 text-gray-400 mx-16 rounded'><h1>ارسال باسخ</h1></div> |
||||
<div className="py-4 px-6 bg-green-100 text-gray-400 mx-16 rounded"> |
||||
<h1>ارسال باسخ</h1> |
||||
</div> |
||||
</div> |
||||
</header>} |
||||
{comment.answers.length > 1 ? <div className='w-full flex justify-center'> |
||||
{open ? <Button |
||||
title={viewmore} |
||||
backgroundColor={"bg-gray-200"} |
||||
border={{ |
||||
color: "#C01919", |
||||
width: "0px", |
||||
}} |
||||
width="24%" |
||||
radius={false} |
||||
onClick={isOpen ? () => {setNumberOfAnswers(1);setViewMore("مشاهده باسخ های بیشتر");setIsOpen(false);} : () => { setNumberOfAnswers(comment.answers.length);setViewMore('بستن باسخ ها');setIsOpen(true)}} |
||||
color={"text-gray-500"} |
||||
/> : null} |
||||
</div> : null} |
||||
|
||||
</div> |
||||
|
||||
</> |
||||
); |
||||
}; |
||||
return ( |
||||
<div className="w-full flex flex-col"> |
||||
{comments.map((comment, index) => ( |
||||
<Comment comment={comment} key={index} /> |
||||
))} |
||||
</header> |
||||
)} |
||||
{comment.answers.length > 1 ? ( |
||||
<div className="w-full flex justify-center"> |
||||
{open ? ( |
||||
<Button |
||||
title={viewmore} |
||||
backgroundColor={"bg-gray-200"} |
||||
border={{ |
||||
color: "#C01919", |
||||
width: "0px", |
||||
}} |
||||
width="24%" |
||||
radius={false} |
||||
onClick={ |
||||
isOpen |
||||
? () => { |
||||
setNumberOfAnswers(1); |
||||
setViewMore("مشاهده باسخ های بیشتر"); |
||||
setIsOpen(false); |
||||
} |
||||
: () => { |
||||
setNumberOfAnswers(comment.answers.length); |
||||
setViewMore("بستن باسخ ها"); |
||||
setIsOpen(true); |
||||
} |
||||
} |
||||
color={"text-gray-500"} |
||||
/> |
||||
) : null} |
||||
</div> |
||||
) : null} |
||||
</div> |
||||
); |
||||
</> |
||||
); |
||||
}; |
||||
return ( |
||||
<div className="w-full flex flex-col"> |
||||
{comments.map((comment, index) => ( |
||||
<Comment comment={comment} key={index} /> |
||||
))} |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default QandA; |
||||
|
||||
QandA.defaultProps = { |
||||
comments: [ |
||||
{ |
||||
id: 0, |
||||
pid: null, |
||||
username: "آرش سامانی", |
||||
isCostumer: true, |
||||
date: new Date(), |
||||
text: "خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ", |
||||
rate: 4, |
||||
answers: [ |
||||
{ |
||||
text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد' |
||||
}, |
||||
{ |
||||
text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد' |
||||
}, |
||||
{ |
||||
text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها' |
||||
}, |
||||
{ |
||||
text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است' |
||||
}, |
||||
|
||||
], |
||||
status: true, |
||||
}, |
||||
{ |
||||
id: 1, |
||||
pid: null, |
||||
username: "سورنا عابدی", |
||||
isCostumer: false, |
||||
date: new Date(), |
||||
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد ", |
||||
rate: 4, |
||||
answers: [ |
||||
], |
||||
status: true, |
||||
}, |
||||
|
||||
|
||||
], |
||||
}; |
||||
comments: [ |
||||
{ |
||||
id: 0, |
||||
pid: null, |
||||
username: "آرش سامانی", |
||||
isCostumer: true, |
||||
date: new Date(), |
||||
text: "خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ", |
||||
rate: 4, |
||||
answers: [ |
||||
{ |
||||
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد", |
||||
}, |
||||
{ |
||||
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد", |
||||
}, |
||||
{ |
||||
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها", |
||||
}, |
||||
{ |
||||
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است", |
||||
}, |
||||
], |
||||
status: true, |
||||
}, |
||||
{ |
||||
id: 1, |
||||
pid: null, |
||||
username: "سورنا عابدی", |
||||
isCostumer: false, |
||||
date: new Date(), |
||||
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد ", |
||||
rate: 4, |
||||
answers: [], |
||||
status: true, |
||||
}, |
||||
], |
||||
}; |
||||
|
||||
@ -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", |
||||
}, |
||||
}; |
||||
Loading…
Reference in new issue