master
mahdi 3 years ago
parent f23606f397
commit 3901190c58
  1. 4
      src/App.js
  2. 2
      src/components/ProductImage/index.js
  3. 51
      src/components/ProductTab/index.js
  4. 44
      src/components/ProductTab/table/index.js
  5. 20
      src/index.scss

@ -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>
);

@ -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" />
))}

@ -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",
},
],
};

@ -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",
},
};

@ -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;

Loading…
Cancel
Save