96 lines
3.5 KiB
TypeScript
96 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import { Locale } from '@/lib/i18n';
|
|
import { getSEOData, SEOData } from '@/lib/seo';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
interface SEOPreviewProps {
|
|
locale: Locale;
|
|
page: string;
|
|
className?: string;
|
|
}
|
|
|
|
export default function SEOPreview({ locale, page, className = '' }: SEOPreviewProps) {
|
|
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="border rounded-lg p-4 bg-white shadow-sm">
|
|
<div className="h-5 bg-gray-200 rounded mb-2"></div>
|
|
<div className="h-4 bg-gray-200 rounded mb-1"></div>
|
|
<div className="h-4 bg-gray-200 rounded w-2/3"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!seoData) {
|
|
return null;
|
|
}
|
|
|
|
const baseUrl = 'https://haoaws.com';
|
|
const currentUrl = `${baseUrl}${locale === 'zh-CN' ? '' : `/${locale}`}${page === 'home' ? '' : `/${page}`}`;
|
|
|
|
return (
|
|
<div className={`seo-preview ${className}`}>
|
|
<h3 className="text-lg font-semibold mb-3">
|
|
{locale === 'zh-CN'
|
|
? '搜索引擎预览'
|
|
: locale === 'zh-TW'
|
|
? '搜尋引擎預覽'
|
|
: 'Search Engine Preview'}
|
|
</h3>
|
|
|
|
{/* Google Search Result Preview */}
|
|
<div className="border rounded-lg p-4 bg-white shadow-sm mb-4">
|
|
<div className="text-xs text-gray-600 mb-1">{currentUrl}</div>
|
|
<h4 className="text-blue-600 text-lg hover:underline cursor-pointer mb-1">
|
|
{seoData.title}
|
|
</h4>
|
|
<p className="text-sm text-gray-700 leading-relaxed">{seoData.description}</p>
|
|
</div>
|
|
|
|
{/* Social Media Preview */}
|
|
<div className="border rounded-lg p-4 bg-white shadow-sm">
|
|
<h4 className="text-sm font-semibold mb-2">
|
|
{locale === 'zh-CN'
|
|
? '社交媒体预览'
|
|
: locale === 'zh-TW'
|
|
? '社群媒體預覽'
|
|
: 'Social Media Preview'}
|
|
</h4>
|
|
<div className="border rounded bg-gray-50 p-3">
|
|
<div className="w-full h-32 bg-gray-200 rounded mb-2 flex items-center justify-center text-gray-500 text-sm">
|
|
{locale === 'zh-CN'
|
|
? '预览图片'
|
|
: locale === 'zh-TW'
|
|
? '預覽圖片'
|
|
: 'Preview Image'}
|
|
</div>
|
|
<h5 className="font-semibold text-sm mb-1">{seoData.title}</h5>
|
|
<p className="text-xs text-gray-600 mb-1">{seoData.description}</p>
|
|
<div className="text-xs text-gray-500">{currentUrl}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|