91 lines
3.9 KiB
TypeScript
91 lines
3.9 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
|
||
interface SupportTabsProps {
|
||
translations: any;
|
||
}
|
||
|
||
export default function SupportTabs({ translations }: SupportTabsProps) {
|
||
const [activeTab, setActiveTab] = useState('faq');
|
||
const t = translations;
|
||
|
||
return (
|
||
<>
|
||
<div className="flex justify-center mb-8">
|
||
<div className="flex space-x-1 bg-gray-100 p-1 rounded-lg">
|
||
{t.tabs && Object.entries(t.tabs).map(([key, label]) => (
|
||
<button
|
||
key={key}
|
||
onClick={() => setActiveTab(key)}
|
||
className={`px-6 py-2 rounded-md ${
|
||
activeTab === key
|
||
? 'bg-blue-600 text-white'
|
||
: 'text-gray-700 hover:bg-gray-200'
|
||
}`}
|
||
>
|
||
{label as string}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{activeTab === 'faq' && (
|
||
<div>
|
||
<h2 className="text-3xl font-bold text-center mb-12">{t.faq?.title}</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
{t.faq?.categories?.map((category: any, index: number) => (
|
||
<div key={index} className="bg-white rounded-lg shadow-lg p-6">
|
||
<h3 className="text-xl font-bold mb-4">{category.name}</h3>
|
||
<div className="space-y-4">
|
||
{category.questions?.map((item: any, qIndex: number) => (
|
||
<div key={qIndex}>
|
||
<h4 className="font-semibold text-gray-800 mb-2">
|
||
{item.q}
|
||
</h4>
|
||
<p className="text-gray-600 text-sm">
|
||
{item.a}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'contact' && (
|
||
<div>
|
||
<h2 className="text-3xl font-bold text-center mb-12">
|
||
{t.contactSupport?.title}
|
||
</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
{t.contactSupport?.methods?.map((method: any, index: number) => (
|
||
<div
|
||
key={index}
|
||
className="bg-white rounded-lg shadow-lg p-6 text-center"
|
||
>
|
||
<div className="text-4xl mb-4">{method.icon}</div>
|
||
<h3 className="text-xl font-bold mb-2">{method.type}</h3>
|
||
<p className="text-blue-600 font-semibold mb-2">
|
||
{method.value}
|
||
</p>
|
||
<p className="text-gray-600 text-sm">
|
||
{method.description}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{(activeTab === 'docs' || activeTab === 'tickets') && (
|
||
<div className="text-center py-16">
|
||
<h2 className="text-2xl font-bold mb-4">功能开发中</h2>
|
||
<p className="text-gray-600">该功能正在开发中，敬请期待。</p>
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
}
|