Pedram Added Question And Answer Container

src/components/QandA/index.js

@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+
+
+import moment from "jalali-moment";
+
+import StarRating from "../StarRating";
+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()}&nbsp;:&nbsp;{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>
+                </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"></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>
+                    </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">
+              <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}
+                buttonBgColor={"bg-gray-200"}
+                buttonBorder={{
+                  color: "#C01919",
+                  width: "0px",
+                }}
+                
+                
+                onClick={isOpen ?  () => {setNumberOfAnswers(1);setViewMore("مشاهده باسخ های بیشتر");setIsOpen(false);} : () => { setNumberOfAnswers(comment.answers.length);setViewMore('بستن باسخ ها');setIsOpen(true)}}
+                buttonTextColor={"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,
+      },
+      
+      
+    ],
+  };

src/redux/data.js

@@ -38,6 +38,7 @@ import ProductStatusCard from "../components/ProductStatusCard";
 import VodProductNew from "../components/VodProductNew";
 import AddToCartCard from "../components/AddToCart";
 import ProductDescription from "../components/ProductDescription";
+import QandA from '../components/QandA';
 
 const components = [
   {
@@ -642,6 +643,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "QandA",
+    author: "Keshavarzi",
+    props: [],
+    content: {
+      name: "Question And Answer Container",
+      component: <QandA />,
+      code: null,
+    },
+  },
 ];
 
 export default components;