89 lines
2.8 KiB
TypeScript
89 lines
2.8 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { Locale } from '@/lib/i18n';
|
||
|
|
import { getSEOData, SEOData } from '@/lib/seo';
|
||
|
|
import { useEffect, useState } from 'react';
|
||
|
|
|
||
|
|
interface TDKManagerProps {
|
||
|
|
locale: Locale;
|
||
|
|
page: string;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function TDKManager({ locale, page, className = '' }: TDKManagerProps) {
|
||
|
|
const [seoData, setSeoData] = useState<SEOData | null>(null);
|
||
|
|
const [loading, setLoading] = useState(true);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const loadSEOData = async () => {
|
||
|
|
try {
|
||
|
|
setLoading(true);
|
||
|
|
const data = await getSEOData(locale, page);
|
||
|
|
setSeoData(data);
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Failed to load SEO data:', error);
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
loadSEOData();
|
||
|
|
}, [locale, page]);
|
||
|
|
|
||
|
|
if (loading) {
|
||
|
|
return (
|
||
|
|
<div className={`animate-pulse ${className}`}>
|
||
|
|
<div className="h-4 bg-gray-200 rounded mb-2"></div>
|
||
|
|
<div className="h-3 bg-gray-200 rounded mb-1"></div>
|
||
|
|
<div className="h-3 bg-gray-200 rounded w-3/4"></div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!seoData) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={`tdk-info ${className}`}>
|
||
|
|
<div className="mb-4">
|
||
|
|
<h3 className="text-sm font-semibold text-gray-600 mb-1">
|
||
|
|
{locale === 'zh-CN'
|
||
|
|
? '页面标题'
|
||
|
|
: locale === 'zh-TW'
|
||
|
|
? '頁面標題'
|
||
|
|
: 'Page Title'}
|
||
|
|
</h3>
|
||
|
|
<p className="text-sm text-gray-800">{seoData.title}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mb-4">
|
||
|
|
<h3 className="text-sm font-semibold text-gray-600 mb-1">
|
||
|
|
{locale === 'zh-CN'
|
||
|
|
? '页面描述'
|
||
|
|
: locale === 'zh-TW'
|
||
|
|
? '頁面描述'
|
||
|
|
: 'Page Description'}
|
||
|
|
</h3>
|
||
|
|
<p className="text-sm text-gray-800">{seoData.description}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h3 className="text-sm font-semibold text-gray-600 mb-1">
|
||
|
|
{locale === 'zh-CN' ? '关键词' : locale === 'zh-TW' ? '關鍵詞' : 'Keywords'}
|
||
|
|
</h3>
|
||
|
|
<div className="flex flex-wrap gap-1">
|
||
|
|
{seoData.keywords.map((keyword, index) => (
|
||
|
|
<span
|
||
|
|
key={index}
|
||
|
|
className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded"
|
||
|
|
>
|
||
|
|
{keyword}
|
||
|
|
</span>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|