group by years

src/components/AIPoliciesTable.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Link from 'next/link';
 
 interface PolicyData {
@@ -14,24 +14,47 @@ interface AIPoliciesTableProps {
 }
 
 const AIPoliciesTable: React.FC<AIPoliciesTableProps> = ({ policies }) => {
-  const groupedPolicies: { [slug: string]: PolicyData[] } = {};
+  const groupedPoliciesByYear: { [year: string]: { [slug: string]: PolicyData[] } } = {};
 
   policies.forEach((policy) => {
-    if (!groupedPolicies[policy.slug]) {
-      groupedPolicies[policy.slug] = [];
+    const year = new Date(policy.releaseDate).getFullYear().toString();
+    if (!groupedPoliciesByYear[year]) {
+      groupedPoliciesByYear[year] = {};
     }
-    groupedPolicies[policy.slug].push(policy);
+    if (!groupedPoliciesByYear[year][policy.slug]) {
+      groupedPoliciesByYear[year][policy.slug] = [];
+    }
+    groupedPoliciesByYear[year][policy.slug].push(policy);
   });
 
-  // Sort the policies within each group based on releaseDate in descending order
-  Object.values(groupedPolicies).forEach((group) => {
-    group.sort((a, b) => new Date(b.releaseDate).getTime() - new Date(a.releaseDate).getTime());
-  });
+  const sortedYears = Object.keys(groupedPoliciesByYear).sort((a, b) => parseInt(b) - parseInt(a));
 
   return (
     <div className="my-8">
-      {/* <h2 className="text-2xl font-bold mb-4 dark:text-white">AI Policies from the Chinese government</h2> */}
-      <div className="overflow-x-auto">
+      {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) => {
@@ -43,7 +66,7 @@ const AIPoliciesTable: React.FC<AIPoliciesTableProps> = ({ policies }) => {
                   <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">{zhPolicy?.releaseDate}</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) => (
@@ -65,7 +88,7 @@ const AIPoliciesTable: React.FC<AIPoliciesTableProps> = ({ policies }) => {
             })}
           </tbody>
         </table>
-      </div>
+      )}
     </div>
   );
 };