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