update data.js

src/components/ProductDescriptionTable/ProductTable1/index.js

@@ -0,0 +1,111 @@
+import React from "react";
+
+const ProductTable1 = ({ navTitles, items, addToCart }) => {
+  return (
+    <>
+      <div className="w-full flex justify-center rounded bg-gray-200">
+        <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="w-full flex">
+        <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 ProductTable1;
+
+ProductTable1.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/components/ProductDescriptionTable/index.js

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+
+import ProductTable1 from "./ProductTable1";
+
+function Advertisements() {
+  const list = {
+    1: <ProductTable1 />,
+  };
+  const [type, setType] = useState(1);
+  return (
+    <div className="w-full flex flex-col items-center">
+      <select
+        className="mb-10 w-20 bg-gray-200"
+        onChange={(e) => setType(e.target.value)}
+      >
+        {Object.keys(list).map((option, index) => (
+          <option key={index}>{option}</option>
+        ))}
+      </select>
+      {list[type]}
+    </div>
+  );
+}
+
+export default Advertisements;

src/redux/data.js

@@ -26,6 +26,7 @@ import SingleProduct from "../components/SingleProduct";
 import Rating from "../components/Rating";
 import Tooltip from "../components/Tooltip";
 import ProductSuggestionCard from "../components/ProductSuggestionCard";
+import ProductDescriptionTable from "../components/ProductDescriptionTable";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -599,6 +600,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Product Description Table",
+    author: "Keshavarzi",
+    props: [],
+    content: {
+      name: "Product Description Table",
+      component: <ProductDescriptionTable />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",