57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
// @/components/ProductTabsClient.tsx (客户端组件)
|
|
'use client';
|
|
import { useTranslations } from 'next-intl';
|
|
import { useState } from 'react';
|
|
|
|
type ProductTabsClientProps = {
|
|
detail: string;
|
|
spec: string[];
|
|
packaging: string;
|
|
locale: string;
|
|
};
|
|
|
|
// 纯客户端交互组件（仅处理标签页切换）
|
|
export default function ProductTabsClient({ detail, spec, packaging, locale }: ProductTabsClientProps) {
|
|
const [activeTab, setActiveTab] = useState('spec'); // 仅客户端使用状态
|
|
const t = useTranslations("Product");
|
|
|
|
return (
|
|
<div className="border rounded">
|
|
{/* 标签栏 */}
|
|
<div className="flex border-b">
|
|
<button
|
|
className={`px-4 py-2 border-r transition-colors ${activeTab === 'detail' ? 'bg-orange-50 text-orange-600 font-medium' : 'hover:bg-gray-50'}`}
|
|
onClick={() => setActiveTab('detail')}
|
|
>
|
|
{t('productDetail')}
|
|
</button>
|
|
<button
|
|
className={`px-4 py-2 border-r transition-colors ${activeTab === 'spec' ? 'bg-orange-50 text-orange-600 font-medium' : 'hover:bg-gray-50'}`}
|
|
onClick={() => setActiveTab('spec')}
|
|
>
|
|
{t('productSpec')}
|
|
</button>
|
|
<button
|
|
className={`px-4 py-2 transition-colors ${activeTab === 'packaging' ? 'bg-orange-50 text-orange-600 font-medium' : 'hover:bg-gray-50'}`}
|
|
onClick={() => setActiveTab('packaging')}
|
|
>
|
|
{t('productPacking')}
|
|
</button>
|
|
</div>
|
|
{/* 内容区 */}
|
|
<div className="p-4">
|
|
{activeTab === 'detail' && <div className="text-gray-800">{detail || t('productNoDetail')}</div>}
|
|
{activeTab === 'spec' && (
|
|
spec.length > 0 ? (
|
|
<div className="space-y-1 text-gray-800">
|
|
{spec.map((item, idx) => <div key={idx}>{item}</div>)}
|
|
</div>
|
|
) : (
|
|
<p className="text-gray-500">{t('productNoSpec')}</p>
|
|
)
|
|
)}
|
|
{activeTab === 'packaging' && <div className="text-gray-800">{packaging || t('productNoPacking')}</div>}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |