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.
185 lines
10 KiB
185 lines
10 KiB
import React, { useState } from "react"; |
|
import moment from "jalali-moment"; |
|
|
|
//components |
|
import Counter from "../Counter"; |
|
import Button from "../Button"; |
|
|
|
const QandA = ({ comments }) => { |
|
const Comment = ({ comment }) => { |
|
const [open, Setopen] = useState(true); |
|
const [viewmore, setViewMore] = useState(window.t("مشاهده پاسخ های بیشتر")); |
|
const [numberOfAnswers, setNumberOfAnswers] = useState(1); |
|
const [isOpen, setIsOpen] = useState(false); |
|
return ( |
|
<> |
|
<div className="flex flex-col leading-7 w-full py-6 border-t-2 border-solid border-gray-200"> |
|
<header className="w-full flex justify-between py-1"> |
|
<div className="flex items-end"> |
|
<div className="flex items-center"> |
|
<strong className="text-lg mx-2">{comment.username}</strong> |
|
{comment.isCostumer ? ( |
|
<p className="text-greenBA font-light"> |
|
{window.t("خریدار محصول")} |
|
</p> |
|
) : null} |
|
</div> |
|
</div> |
|
<div |
|
className="flex 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 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 justify-between items-center"> |
|
<div className="flex items-center"> |
|
<div className="py-4 px-6 bg-blue-100 text-gray-400 rounded"> |
|
<h1>{window.t("پرسش")}</h1> |
|
</div> |
|
</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> |
|
|
|
{comment.answers.length > 0 ? ( |
|
comment.answers.slice(0, numberOfAnswers).map((item, index) => ( |
|
<div className="flex py-1" key={index}> |
|
<div style={{ width: 60 }} className="min-h-full"></div> |
|
<div className="flex flex-1 flex-col px-3"> |
|
<header className="w-full flex justify-between items-center"> |
|
<div className="flex items-center"> |
|
<div className="py-4 px-6 bg-green-100 text-gray-400 rounded"> |
|
<h1>{window.t("پاسخال پاسخ")}</h1> |
|
</div> |
|
</div> |
|
</header> |
|
<div className="flex items-center justify-between"> |
|
<p className="text-gray-500 m-4">{item.text}</p> |
|
<div> |
|
<Counter value={456} /> |
|
</div> |
|
</div> |
|
<div className="self-end mt-4"></div> |
|
</div> |
|
</div> |
|
)) |
|
) : ( |
|
<header className="w-full flex justify-between items-center"> |
|
<div className="flex w-4/5 items-center"> |
|
<div className="py-4 px-6 bg-green-100 text-gray-400 mx-16 rounded"> |
|
<h1>{window.t("ارسال پاسخ")}</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(window.t("مشاهده پاسخ های بیشتر")); |
|
setIsOpen(false); |
|
} |
|
: () => { |
|
setNumberOfAnswers(comment.answers.length); |
|
setViewMore(window.t("بستن پاسخ ها")); |
|
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: window.t("آرش سامانی"), |
|
isCostumer: true, |
|
date: new Date(), |
|
text: window.t( |
|
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها" |
|
), |
|
rate: 4, |
|
answers: [ |
|
{ |
|
text: window.t( |
|
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها" |
|
), |
|
}, |
|
{ |
|
text: window.t( |
|
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها" |
|
), |
|
}, |
|
{ |
|
text: window.t( |
|
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها" |
|
), |
|
}, |
|
{ |
|
text: window.t( |
|
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است" |
|
), |
|
}, |
|
], |
|
status: true, |
|
}, |
|
{ |
|
id: 1, |
|
pid: null, |
|
username: window.t("سورنا عابدی"), |
|
isCostumer: false, |
|
date: new Date(), |
|
text: window.t( |
|
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد" |
|
), |
|
rate: 4, |
|
answers: [], |
|
status: true, |
|
}, |
|
], |
|
};
|
|
|