You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.2 KiB
52 lines
1.2 KiB
3 years ago
|
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",
|
||
|
},
|
||
|
],
|
||
|
};
|