92 lines
No EOL
3 KiB
TypeScript
92 lines
No EOL
3 KiB
TypeScript
import React from 'react';
|
|
import { Card, Avatar, Tag } from 'antd';
|
|
import { GithubOutlined, TwitterOutlined } from '@ant-design/icons';
|
|
import sponsorsData from '../../data/zh-CN/sponsors.json';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
interface SponsorType {
|
|
nickname: string;
|
|
avatar?: string;
|
|
year: number;
|
|
amount: string;
|
|
socialLinks?: {
|
|
github?: string;
|
|
twitter?: string;
|
|
};
|
|
}
|
|
|
|
const Sponsors: React.FC = () => {
|
|
const { i18n } = useTranslation();
|
|
|
|
const getMessage = () => {
|
|
switch (i18n.language) {
|
|
case 'zh-CN':
|
|
return '赞助人信息仍在同步，将在晚些时候上线。';
|
|
case 'zh-TW':
|
|
return '贊助人資訊仍在同步，將在晚些時候上線。';
|
|
case 'en-US':
|
|
default:
|
|
return 'Sponsor information is still being synchronized and will be available later.';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center justify-center min-h-[300px] text-gray-600 dark:text-gray-300 text-lg">
|
|
{getMessage()}
|
|
</div>
|
|
);
|
|
|
|
// Original sponsors display code
|
|
/*
|
|
return (
|
|
<div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 max-w-screen-xl mx-auto">
|
|
{sponsorsData.map((sponsor: SponsorType, index: number) => (
|
|
<div key={index} className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 text-center transition-colors min-w-[240px]">
|
|
{sponsor.avatar && (
|
|
<div className="w-16 h-16 mx-auto mb-3">
|
|
<Avatar
|
|
size={64}
|
|
src={sponsor.avatar}
|
|
className="w-full h-full"
|
|
/>
|
|
</div>
|
|
)}
|
|
<h3 className="text-lg font-semibold mb-3 text-gray-900 dark:text-white">{sponsor.nickname}</h3>
|
|
<div className="space-y-4">
|
|
<div className="flex justify-center gap-3">
|
|
<Tag color="gold">{sponsor.year}</Tag>
|
|
<Tag color="green">{sponsor.amount}</Tag>
|
|
</div>
|
|
{sponsor.socialLinks && (
|
|
<div className="flex justify-center gap-4">
|
|
{sponsor.socialLinks.github && (
|
|
<a
|
|
href={sponsor.socialLinks.github}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
|
|
>
|
|
<GithubOutlined className="text-xl" />
|
|
</a>
|
|
)}
|
|
{sponsor.socialLinks.twitter && (
|
|
<a
|
|
href={sponsor.socialLinks.twitter}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
|
|
>
|
|
<TwitterOutlined className="text-xl" />
|
|
</a>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
*/
|
|
};
|
|
|
|
export default Sponsors;
|