Moshakhasat Made

src/components/ProductDescription/index.js

@@ -0,0 +1,111 @@
+import React from "react";
+
+const ProductDescription = ({
+    navTitles,
+    items,
+    addToCart
+}) =>{
+    return(
+        <>
+            <div className="flex w-full rounded  bg-gray-200 justify-center mt-6 ">
+                <ul className="w-full flex justify-center">
+                    {navTitles.map(item => <li key={`NavTitle_${item.id}`} 
+                    className={`p-6 mx-4 cursor-pointer
+                     ${item.isActive ? 'border-0 border-b-4 border-solid border-blue-500' : null}`
+                     } 
+                     onClick={() => item.isActive ? null : item.isActive = !item.isActive }>
+                         {item.title}</li>)}
+                </ul>
+            </div>
+            <div className="flex w-full ">
+                <div className="flex-1 ">
+                   {items.map(e => (
+                       
+                            e.items.map(item => (
+                                    <ul className="flex w-full flex-1 my-2 items-center">
+                                    <li className="py-4 px-8  min-w-md bg-gray-200 ml-4 text-blueC0" style={{minWidth: '300px'}}>{item.title}</li>
+                                    <li className="py-4 px-8  min-w-md bg-gray-200 ml-4 w-full">{item.description}</li>
+                                    </ul>  
+                                ))
+                            
+                        
+                   ))} 
+                </div>
+                <div className="my-2">
+                    {addToCart}
+                </div>
+
+            </div>
+        </>
+    );
+};
+
+
+
+
+
+export default ProductDescription;
+
+
+
+
+ProductDescription.defaultProps = {
+    navTitles: [
+        {
+            id: 0,
+            title: 'مشخصات',
+            isActive: true,
+            name: 'moshakhasat'
+        },
+        {
+            id: 1,
+            title: 'نقد و بررسی',
+            isActive: false
+        },
+        {
+            id: 2,
+            title: 'برسش و باسخ',
+            isActive:false
+        },
+    ],
+    items: [
+        {
+            name: 'moshakhasat',
+            items: [
+                {
+                    title : 'وزن کتاب',
+                    description: '۱ کیلوگرم'
+                },
+                {
+                    title : 'تعداد صفحات',
+                    description: '400 صفحه'
+                },
+                {
+                    title : 'نوع کاغذ',
+                    description: 'گلاسه'
+                },
+                {
+                    title : 'شماره شابک',
+                    description: '1225548218000005818765'
+                },
+                {
+                    title : 'انتشارات',
+                    description: 'رزمندگان'
+                },
+                {
+                    title : 'نویسنده و یا معلف',
+                    description: 'یک نویسنده گمنام'
+                },
+                {
+                    title : 'قطع',
+                    description: 'خشتی'
+                },
+                {
+                    title : 'سال انتشار',
+                    description: '1399'
+                },
+        ]
+        }
+    ]
+    
+}

src/views/Product/Desktop/ProductOverAll/index.js

@@ -11,6 +11,7 @@ import Rate from "../../Rate";
 import StarRating from "../../../../components/StarRating";
 import AddToCartCard from "../../../../components/AddToCart";
 import logo from '../../../../assets/images/user.png';
+import ProductDescription from "../../../../components/ProductDescription";
 
 export const ProductOverAll = ({
   productType,
@@ -33,7 +34,7 @@ export const ProductOverAll = ({
         <img
           src={`https://dnvn.ir/api/v1/file/${book?.fileIds}`}
           alt=""
-          style={{ height: '320px' }}
+          style={{ height: '420px' }}
           className="-md py-8 px-16 bg-grayF4 mx-4"
         />
         <div className="flex flex-col flex-1 ">
@@ -153,6 +154,52 @@ export const ProductOverAll = ({
         </div>
 
       </header>
+
+      <ProductDescription 
+      
+      
+      addToCart={
+        <AddToCartCard 
+          price={type === "digital" ? book?.product[0]?.price : book?.product[1]?.price}
+          sendingTime={20}
+          numberOfSuggest={160}
+          profit={12000}
+          showProduct
+          productCat={grades[book?.gradeId]}
+          productImg={`https://dnvn.ir/api/v1/file/${book?.fileIds}`}
+          productName={type === "digital"
+          ? book?.product[0]?.name
+          : book?.product[1]?.name}
+          button={
+            <Button
+            onClick={() =>
+              proxy.status()
+                ? pushToCart({
+                  productId:
+                    type === "digital"
+                      ? book?.product[0]?.id
+                      : book?.product[1]?.id,
+                  userId: userId,
+                  count: 1,
+                })
+                : toast.info("ابتدا وارد حساب کاربری خود شوید.")
+            }
+            title='افزودن به سبد خرید'
+            backgroundColor="bg-blueC0"
+            border={{ color: "#196EC055", width: "1px" }}
+            width="100%"
+            color="text-white"
+           twPaddings='py-4'
+          />
+          }
+
+          // footer='SendBack'
+
+          />
+      }
+      
+      
+      />
       <ul
         className="list-none flex flex-row divide-x items-center mt-4"
         style={{ direction: "ltr" }}
@@ -167,13 +214,7 @@ export const ProductOverAll = ({
           {book?.rate} <br /> امتیاز
         </li>
       </ul>
-      <h2 className="text-blueC0 text-sm font-semibold mt-7 dark:text-greenBA">
-        نسخه محصول را انتخاب کنید
-      </h2>
-
-      <div className="w-full flex flex-row justify-between items-center mt-4">
-        
-      </div>
+    
       <div className="w-full flex flex-row justify-between items-center mt-4">
         <Button
           title="مشاهده دوره ویدئویی این محصول"