File size: 2,954 Bytes
4646723 31767a7 4646723 f831b65 31767a7 4646723 cbc828e 4646723 cbc828e 4646723 cbc828e 4646723 cbc828e 4646723 31767a7 4646723 31767a7 4646723 31767a7 4646723 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 |
import React from "react";
interface PolicyData {
zh: string;
en: string;
link: {
zh: string;
en: string;
};
releaseDate: string;
}
interface AIPoliciesTableProps {
policies: PolicyData[];
}
const AIPoliciesTable: React.FC<AIPoliciesTableProps> = ({ policies }) => {
const groupedPolicies = policies.reduce((acc, policy) => {
const year = new Date(policy.releaseDate).getFullYear();
if (!acc[year]) {
acc[year] = [];
}
acc[year].push(policy);
return acc;
}, {} as { [key: number]: PolicyData[] });
const sortedYears = Object.keys(groupedPolicies)
.map(Number)
.sort((a, b) => b - a);
const formatDate = (dateString: string) => {
const date = new Date(dateString);
const options: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric', year: 'numeric' };
return date.toLocaleDateString('en-US', options);
};
return (
<div>
{sortedYears.map((year) => (
<div key={year} className="mb-8">
<button className="text-xl font-bold mb-2 focus:outline-none">
{year} ▼
</button>
<table className="w-full border-collapse table-auto">
<tbody>
{groupedPolicies[year].map((policy, index) => (
<tr
key={`${year}-${index}`}
className={`${
index % 2 === 0 ? "bg-white" : "bg-gray-50"
} dark:bg-gray-${index % 2 === 0 ? "700" : "800"}`}
>
<td className="py-2 px-4 dark:text-white">
<div>{policy.zh}</div>
<div className="text-sm text-gray-500 dark:text-gray-400">
{policy.en}
</div>
<div className="text-xs text-gray-400 dark:text-gray-500">
{formatDate(policy.releaseDate)}
</div>
</td>
<td className="py-2 px-4">
{policy.link.zh && (
<a
href={policy.link.zh}
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 hover:underline dark:text-blue-400 mr-4"
>
中文
</a>
)}
{policy.link.en && (
<a
href={policy.link.en}
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 hover:underline dark:text-blue-400 mr-4"
>
English
</a>
)}
</td>
</tr>
))}
</tbody>
</table>
</div>
))}
</div>
);
};
export default AIPoliciesTable;
|