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>
|
|||
|
|
)}
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
}
|