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.
 
 
 

51 lines
1.2 KiB

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:text-blue-400 ${
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",
},
],
};