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

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()}&nbsp;:&nbsp;
{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,
},
],
};