File size: 3,775 Bytes
d4a7cd9 a2242ea 31767a7 d4a7cd9 4646723 cbc828e 4646723 cbc828e 4646723 cbc828e 4646723 cbc828e d4a7cd9 4646723 d4a7cd9 4646723 d4a7cd9 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 96 97 98 99 100 101 102 103 104 105 |
import React, { useState } from "react";
import { PolicyData } from "../types";
interface AIPoliciesTableProps {
policies: PolicyData[];
}
const AIPoliciesTable: React.FC<AIPoliciesTableProps> = ({ policies }) => {
const initialOpenYears = policies.reduce((acc, policy) => {
const year = new Date(policy.releaseDate).getFullYear();
acc[year] = true;
return acc;
}, {} as { [key: number]: boolean });
const [openYears, setOpenYears] = useState<{ [key: number]: boolean }>(initialOpenYears);
const toggleYear = (year: number) => {
setOpenYears((prev) => ({ ...prev, [year]: !prev[year] }));
};
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 className="container mx-auto p-6">
{sortedYears.map((year) => (
<div key={year} className="mb-12">
<button
onClick={() => toggleYear(year)}
className="text-2xl font-semibold mb-6 focus:outline-none text-gray-800 dark:text-white"
>
{year} {openYears[year] ? "▲" : "▼"}
</button>
{openYears[year] && (
<table className="w-full border-collapse table-auto shadow-lg rounded-lg">
<tbody>
{groupedPolicies[year].map((policy, index) => (
<tr
key={`${year}-${index}`}
className={`${
index % 2 === 0 ? "bg-gray-300" : "bg-gray-500"
} dark:${
index % 2 === 0 ? "bg-gray-700" : "bg-gray-900"
} border-b border-gray-200 dark:border-gray-700`}
>
<td className="py-6 px-6 text-gray-900 dark:text-white">
<div className="text-lg font-medium">{policy.zh}</div>
<div className="text-sm text-gray-500 dark:text-gray-400 mt-2">
{policy.en}
</div>
<div className="text-xs text-gray-400 dark:text-gray-500 mt-2">
{formatDate(policy.releaseDate)}
</div>
</td>
<td className="py-6 px-6 text-right">
{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"
>
English
</a>
)}
</td>
</tr>
))}
</tbody>
</table>
)}
</div>
))}
</div>
);
};
export default AIPoliciesTable;
|