diff --git a/src/App.js b/src/App.js index e1c6260..bc76c29 100644 --- a/src/App.js +++ b/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() {
{/* */} {/* */} - + {/* */} {/* */} {/* */} {/* */} @@ -56,6 +57,7 @@ function App() { {/* */} {/* */} {/* */} +
); diff --git a/src/components/ProductImage/index.js b/src/components/ProductImage/index.js index e1eedaa..1db573c 100644 --- a/src/components/ProductImage/index.js +++ b/src/components/ProductImage/index.js @@ -6,7 +6,7 @@ const ProductImage = () => { return (
-
+
{[0, 1, 2, 3, 4].map((item, index) => ( ))} diff --git a/src/components/ProductTab/index.js b/src/components/ProductTab/index.js new file mode 100644 index 0000000..900137c --- /dev/null +++ b/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 ( +
+
+
    + {tabs.map((tab, index) => ( +
  • setSelectedTab(tab)} + key={index} + > + {tab.title} +
  • + ))} +
+
+
+ {selectedTab?.components} +
+
+ ); +}; + +export default ProductTab; + +ProductTab.defaultProps = { + tabs: [ + { + title: "مشخصات", + components: , + bg: "bg-transparent", + }, + { + title: "پرسش", + components: "نقد و بررسی", + bg: "bg-blue-500", + }, + { + title: "سوال", + components: "پرسش و پاسخ", + bg: "bg-yellow-500", + }, + ], +}; diff --git a/src/components/ProductTab/table/index.js b/src/components/ProductTab/table/index.js new file mode 100644 index 0000000..7254410 --- /dev/null +++ b/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 ( +
    + {Object.keys(specifications).map((specification, index) => ( +
  • +
    + {persian[specification]} +
    +
    + {specifications[specification]} +
    +
  • + ))} +
+ ); +}; + +export default Table; + +Table.defaultProps = { + specifications: { + weight: "1 کیلوگرم", + pageNumber: "400 صفحه", + pageType: "گلاسه", + bookNumber: "124900985340561870112312499", + publisher: "رزمندگان", + author: "یک نویسنده گمنام", + bookType: "خشتی", + publishedYear: "1399", + }, +}; diff --git a/src/index.scss b/src/index.scss index aa220f6..b01e364 100644 --- a/src/index.scss +++ b/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;