125 lines
5.7 KiB
TypeScript
125 lines
5.7 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
import Link from 'next/link';
|
||
import Header from '@/app/components/Header';
|
||
import Footer from '@/app/components/Footer';
|
||
import { supportTranslations, type SupportLanguage } from '../../translations';
|
||
|
||
interface SupportPageClientProps {
|
||
locale: string;
|
||
}
|
||
|
||
export default function SupportPageClient({ locale }: SupportPageClientProps) {
|
||
const [language, setLanguage] = useState<SupportLanguage>(
|
||
locale === 'zh' ? 'zh-CN' : locale === 'zh-TW' ? 'zh-TW' : 'en',
|
||
);
|
||
const [activeTab, setActiveTab] = useState('faq');
|
||
|
||
const t = supportTranslations[language] || supportTranslations['zh-CN'];
|
||
|
||
const handleLanguageChange = (newLanguage: string) => {
|
||
const validLanguage = newLanguage as SupportLanguage;
|
||
setLanguage(validLanguage);
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-white">
|
||
<Header
|
||
language={language}
|
||
setLanguage={handleLanguageChange}
|
||
translations={t}
|
||
locale={locale}
|
||
/>
|
||
|
||
<section className="bg-blue-600 text-white h-96 flex items-center justify-center">
|
||
<div className="max-w-6xl mx-auto px-4 text-center">
|
||
<h1 className="text-4xl font-bold mb-4">{t.title}</h1>
|
||
<p className="text-xl">{t.subtitle}</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="py-16">
|
||
<div className="max-w-6xl mx-auto px-4">
|
||
<div className="flex justify-center mb-8">
|
||
<div className="flex space-x-1 bg-gray-100 p-1 rounded-lg">
|
||
{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}
|
||
</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, index) => (
|
||
<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, qIndex) => (
|
||
<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, index) => (
|
||
<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>
|
||
)}
|
||
</div>
|
||
</section>
|
||
|
||
<Footer translations={t} />
|
||
</div>
|
||
);
|
||
}
|