update

src/App.js

@@ -27,6 +27,7 @@ import Toast from "./components/Toast";
 import ProductSuggestion from "./components/ProductSuggestion";
 import ProductImage from "./components/ProductImage";
 import VodProduct from "./components/VodProduct";
+import ProductTab from "./components/ProductTab";
 
 function App() {
   return (
@@ -34,7 +35,7 @@ function App() {
       <div className="App">
         {/* <ProductDesign /> */}
         {/* <VodProductDesign /> */}
-        <VodProduct />
+        {/* <VodProduct /> */}
         {/* <BookDesign /> */}
         {/* <ButtonDesign /> */}
         {/* <ProductTags /> */}
@@ -56,6 +57,7 @@ function App() {
         {/* <Toast /> */}
         {/* <ProductSuggestion /> */}
         {/* <ProductImage /> */}
+        <ProductTab />
       </div>
     </Provider>
   );

src/components/ProductImage/index.js

@@ -6,7 +6,7 @@ const ProductImage = () => {
   return (
     <section className="bg-white m-10 border-2 border-gray-300 p-4 rounded-lg">
       <div className="w-4/12	flex flex-row  h-72">
-        <div className="flex flex-col items-center ml-4 bg-red-600 overflow-y-scroll">
+        <div className="flex flex-col items-center ml-4 overflow-y-scroll">
           {[0, 1, 2, 3, 4].map((item, index) => (
             <img src={productImg} alt="" className=" w-20 rounded-sm mb-2" />
           ))}

src/components/ProductTab/index.js

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import Table from "./table";
+
+const ProductTab = ({ tabs }) => {
+  const [selectedTab, setSelectedTab] = useState(null);
+
+  return (
+    <section className="m-10">
+      <div className="rounded bg-white">
+        <ul className="flex flex-row">
+          {tabs.map((tab, index) => (
+            <li
+              className={`text-sm m-4 cursor-pointer hover:border-b-2 leading-7 hover:text-blue-600 ${
+                selectedTab === tab ? "text-blue-600" : ""
+              }`}
+              onClick={() => setSelectedTab(tab)}
+              key={index}
+            >
+              {tab.title}
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div className={`rounded w-full flex items-center ${selectedTab?.bg}`}>
+        {selectedTab?.components}
+      </div>
+    </section>
+  );
+};
+
+export default ProductTab;
+
+ProductTab.defaultProps = {
+  tabs: [
+    {
+      title: "مشخصات",
+      components: <Table />,
+      bg: "bg-transparent",
+    },
+    {
+      title: "پرسش",
+      components: "نقد و بررسی",
+      bg: "bg-blue-500",
+    },
+    {
+      title: "سوال",
+      components: "پرسش و پاسخ",
+      bg: "bg-yellow-500",
+    },
+  ],
+};

src/components/ProductTab/table/index.js

@@ -0,0 +1,44 @@
+import React from "react";
+
+const persian = {
+  weight: "وزن",
+  pageNumber: "تعداد صفحات",
+  pageType: "نوع کاغذ",
+  bookNumber: "شماره شابک",
+  publisher: "انتشارات",
+  author: "نویسنده",
+  bookType: "قطع",
+  publishedYear: "سال انتشار",
+};
+
+const Table = ({ specifications }) => {
+  return (
+    <ul className="w-full">
+      {Object.keys(specifications).map((specification, index) => (
+        <li className="flex my-3">
+          <div className="bg-white rounded p-3 ml-2" style={{ flex: 2 }}>
+            {persian[specification]}
+          </div>
+          <div className="bg-white rounded p-3" style={{ flex: 8 }}>
+            {specifications[specification]}
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default Table;
+
+Table.defaultProps = {
+  specifications: {
+    weight: "1 کیلوگرم",
+    pageNumber: "400 صفحه",
+    pageType: "گلاسه",
+    bookNumber: "124900985340561870112312499",
+    publisher: "رزمندگان",
+    author: "یک نویسنده گمنام",
+    bookType: "خشتی",
+    publishedYear: "1399",
+  },
+};

src/index.scss

@@ -24,13 +24,13 @@ body {
   border-radius: 50%;
 }
 
-$errorcolor1: #06bace;
-$errorcolor2: #3ee924;
-$errorcolor7: #c70000;
-$errorcolor7button: #e92424;
-$white: #fff;
-$black: #000;
-$contentcolor: #646464;
-$toastbgerror: #ffeaea;
-$toastbgsuccess: #c3ffb9;
-$toastsuccesscolor: #21ae0b;
+// $errorcolor1: #06bace;
+// $errorcolor2: #3ee924;
+// $errorcolor7: #c70000;
+// $errorcolor7button: #e92424;
+// $white: #fff;
+// $black: #000;
+// $contentcolor: #646464;
+// $toastbgerror: #ffeaea;
+// $toastbgsuccess: #c3ffb9;
+// $toastsuccesscolor: #21ae0b;