|
|
|
@ -8,19 +8,23 @@ const ProductTab = ({ tabs }) => { |
|
|
|
|
<section className="mt-10 flex flex-col w-full"> |
|
|
|
|
<div className="rounded-md bg-grayF9"> |
|
|
|
|
<ul className="flex flex-row justify-center gap-16"> |
|
|
|
|
{tabs.map((tab, index) => ( |
|
|
|
|
<li |
|
|
|
|
className={`text-tiny font-semibold cursor-pointer hover:text-blueC0 py-4 transition-all duration-500 ${ |
|
|
|
|
selectedTab?.title === tab?.title |
|
|
|
|
? "text-blueC0 border-b-4 border-solid border-blueC0" |
|
|
|
|
: "border-b-4 border-solid border-transparent" |
|
|
|
|
}`}
|
|
|
|
|
onClick={() => setSelectedTab(tab)} |
|
|
|
|
key={index} |
|
|
|
|
> |
|
|
|
|
{tab.title} |
|
|
|
|
</li> |
|
|
|
|
))} |
|
|
|
|
{tabs.map((tab, index) => |
|
|
|
|
tab.shown ? ( |
|
|
|
|
<li |
|
|
|
|
className={`text-tiny font-semibold cursor-pointer hover:text-blueC0 py-4 transition-all duration-500 ${ |
|
|
|
|
selectedTab?.title === tab?.title |
|
|
|
|
? "text-blueC0 border-b-4 border-solid border-blueC0" |
|
|
|
|
: "border-b-4 border-solid border-transparent" |
|
|
|
|
}`}
|
|
|
|
|
onClick={() => setSelectedTab(tab)} |
|
|
|
|
key={index} |
|
|
|
|
> |
|
|
|
|
{tab.title} |
|
|
|
|
</li> |
|
|
|
|
) : ( |
|
|
|
|
<></> |
|
|
|
|
) |
|
|
|
|
)} |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
<div className={`rounded w-full flex items-center`}> |
|
|
|
|