File size: 3,473 Bytes
cbc828e 31767a7 f831b65 31767a7 cbc828e 31767a7 cbc828e 31767a7 cbc828e 31767a7 cbc828e f831b65 31767a7 cbc828e 31767a7 cbc828e 31767a7 cbc828e 31767a7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
import React, { useState } from 'react';
import Link from 'next/link';
interface PolicyData {
title: string;
slug: string;
fileName: string;
originalLink?: string;
releaseDate: string;
}
interface AIPoliciesTableProps {
policies: PolicyData[];
}
const AIPoliciesTable: React.FC<AIPoliciesTableProps> = ({ policies }) => {
const groupedPoliciesByYear: { [year: string]: { [slug: string]: PolicyData[] } } = {};
policies.forEach((policy) => {
const year = new Date(policy.releaseDate).getFullYear().toString();
if (!groupedPoliciesByYear[year]) {
groupedPoliciesByYear[year] = {};
}
if (!groupedPoliciesByYear[year][policy.slug]) {
groupedPoliciesByYear[year][policy.slug] = [];
}
groupedPoliciesByYear[year][policy.slug].push(policy);
});
const sortedYears = Object.keys(groupedPoliciesByYear).sort((a, b) => parseInt(b) - parseInt(a));
return (
<div className="my-8">
{sortedYears.map((year) => (
<YearSection key={year} year={year} groupedPolicies={groupedPoliciesByYear[year]} />
))}
</div>
);
};
interface YearSectionProps {
year: string;
groupedPolicies: { [slug: string]: PolicyData[] };
}
const YearSection: React.FC<YearSectionProps> = ({ year, groupedPolicies }) => {
const [isOpen, setIsOpen] = useState(true);
return (
<div className="mb-8">
<button
className="text-xl font-bold mb-2 focus:outline-none"
onClick={() => setIsOpen(!isOpen)}
>
{year} {isOpen ? '▼' : '▶'}
</button>
{isOpen && (
<table className="w-full border-collapse table-auto">
<tbody>
{Object.entries(groupedPolicies).map(([slug, policies], index) => {
const zhPolicy = policies.find((policy) => policy.fileName === 'zh.md');
const enPolicy = policies.find((policy) => policy.fileName === 'en.md');
return (
<tr key={slug} className={`${index % 2 === 0 ? 'bg-white dark:bg-gray-700' : 'bg-gray-50 dark:bg-gray-800'}`}>
<td className="py-2 px-4 dark:text-white">
<div>{zhPolicy?.title}</div>
<div className="text-sm text-gray-500 dark:text-gray-400">{enPolicy?.title}</div>
<div className="text-xs text-gray-400 dark:text-gray-500">{new Date(zhPolicy?.releaseDate || '').toLocaleDateString()}</div>
</td>
<td className="py-2 px-4">
{policies.map((policy) => (
policy.originalLink ? (
<a key={policy.fileName} href={policy.originalLink} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline dark:text-blue-400 mr-4">
{policy.fileName === 'zh.md' ? '中文' : 'English'}
</a>
) : (
<Link key={policy.fileName} href={`/policies/${slug}/${policy.fileName}`}>
<span className="text-blue-500 hover:underline dark:text-blue-400 mr-4 cursor-pointer">
{policy.fileName === 'zh.md' ? '中文' : 'English'}
</span>
</Link>
)
))}
</td>
</tr>
);
})}
</tbody>
</table>
)}
</div>
);
};
export default AIPoliciesTable;
|