update src/components/CounterDesign/Counter/index.js and data.js

src/components/QuestionAnswer/QandA/index.js

@@ -0,0 +1,171 @@
+import React, { useState } from "react";
+import moment from "jalali-moment";
+
+import StarRating from "../../Rating/StarRating1";
+import Counter from "../../CounterDesign/Counter";
+import Button from "../../ButtonDesign/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="w-full flex flex-col 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 items-center divide-x divide-gray-300 divided 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 flex-row py-4">
+            <div className="min-h-full w-[60px]"></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">
+                  <Button
+                    text={"پرسش"}
+                    className="py-4 px-6 bg-blue-100 text-gray-400 rounded"
+                  />
+                </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((e) => (
+              <div className="flex flex-row py-1">
+                <div
+                  style={{ width: 60 }}
+                  className="min-h-full w-[60px]"
+                ></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">
+                      <Button
+                        text={"پاسخ"}
+                        className={
+                          "py-4 px-6 bg-green-100 text-gray-400 rounded"
+                        }
+                      />
+                    </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"></div>
+                </div>
+              </div>
+            ))
+          ) : (
+            <header className="w-full flex flex-row justify-between items-center">
+              <div className="flex w-4/5 flex-row items-center">
+                <Button
+                  text={"ارسال پاسخ"}
+                  className={
+                    "py-4 px-6 bg-green-100 text-gray-400 mx-16 rounded"
+                  }
+                />
+              </div>
+            </header>
+          )}
+          {comment.answers.length > 1 ? (
+            <div className="w-full flex justify-center">
+              {open ? (
+                <Button
+                  text={viewmore}
+                  className={"bg-gray-200 text-gray-500 text-sm p-2 rounded"}
+                  onClick={
+                    isOpen
+                      ? () => {
+                          setNumberOfAnswers(1);
+                          setViewMore("مشاهده پاسخ های بیشتر");
+                          setIsOpen(false);
+                        }
+                      : () => {
+                          setNumberOfAnswers(comment.answers.length);
+                          setViewMore("بستن پاسخ ها");
+                          setIsOpen(true);
+                        }
+                  }
+                />
+              ) : 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,
+    },
+  ],
+};