73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
interface ProductTabsWrapperProps {
|
|
descriptionHtml: React.ReactNode;
|
|
specsHtml: React.ReactNode;
|
|
showSpecifications?: boolean;
|
|
}
|
|
|
|
type TabId = 'description' | 'specs';
|
|
|
|
const TAB_LINE = 'border-[#e0e0e0]';
|
|
const BOX = 'border border-[#e0e0e0]';
|
|
|
|
export const ProductTabsWrapper: React.FC<ProductTabsWrapperProps> = ({
|
|
descriptionHtml,
|
|
specsHtml,
|
|
showSpecifications = true,
|
|
}) => {
|
|
const [activeTab, setActiveTab] = useState<TabId>('description');
|
|
|
|
const tabs: { id: TabId; label: string }[] = [
|
|
{ id: 'description', label: 'Description' },
|
|
...(showSpecifications ? [{ id: 'specs' as TabId, label: 'Specifications' }] : []),
|
|
];
|
|
|
|
return (
|
|
<div id="product-tabs" className="bg-white mb-10 text-left">
|
|
{/* Tab Headers */}
|
|
<div className={`flex justify-center items-end gap-8 md:gap-12 border-b ${TAB_LINE} overflow-x-auto no-scrollbar`}>
|
|
{tabs.map((tab) => {
|
|
const isActive = activeTab === tab.id;
|
|
return (
|
|
<button
|
|
key={tab.id}
|
|
type="button"
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`-mb-px pb-[13px] text-[14px] leading-none whitespace-nowrap cursor-pointer border-b-2 transition-colors ${
|
|
isActive
|
|
? 'border-primary text-[#222]'
|
|
: 'border-transparent text-[#9a9a9a] hover:text-[#555]'
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Tab Panels */}
|
|
<div className={`mt-5 ${BOX} bg-white`}>
|
|
|
|
{/* ── Description ── */}
|
|
<div className={activeTab === 'description' ? 'block' : 'hidden'}>
|
|
{descriptionHtml ? (
|
|
descriptionHtml
|
|
) : (
|
|
<p className="text-[13px] text-gray-400 py-8 text-center">
|
|
No description available for this product.
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* ── Specifications ── */}
|
|
<div className={activeTab === 'specs' ? 'block' : 'hidden'}>
|
|
{specsHtml}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|