update styling and fix a few links

content/policies.json

@@ -67,7 +67,7 @@
       "en": "Artificial Intelligence Law of the People's Republic of China (Scholar Proposal Draft)",
       "link": {
         "zh": "http://iolaw.cssn.cn/zxzp/202309/W020230907361599893636.pdf",
-        "en": "https://m.21jingji.com/article/20240416/herald/4df710ffed0ffe037cdf6c54aa369961_zaker.html"
+        "en": "https://digichina.stanford.edu/work/translation-artificial-intelligence-law-model-law-v-1-0-expert-suggestion-draft-aug-2023/"
       },
       "releaseDate": "2024-04-16"
     },
@@ -112,10 +112,19 @@
       "en": "Interim Measures for the Management of Generative Artificial Intelligence Services",
       "link": {
         "zh": "https://www.cac.gov.cn/2023-07/13/c_1690898327029107.htm",
-        "en": ""
+        "en": "https://digichina.stanford.edu/work/translation-measures-for-the-management-of-generative-artificial-intelligence-services-draft-for-comment-april-2023/"
       },
       "releaseDate": "2023-07-13"
     },
+    {
+        "zh": "国家互联网信息办公室关于《生成式人工智能服务管理办法（征求意见稿）》公开征求意见的通知",
+        "en": "Notice on Public Consultation for the Draft Measures for the Management of Generative Artificial Intelligence Services",
+        "link": {
+          "zh": "https://www.cac.gov.cn/2023-04/11/c_1682854275475410.htm",
+          "en": "https://digichina.stanford.edu/work/translation-measures-for-the-management-of-generative-artificial-intelligence-services-draft-for-comment-april-2023/"
+        },
+        "releaseDate": "2023-04-11"
+      },
     {
       "zh": "工业和信息化部关于印发《促进新一代人工智能产业发展三年行动计划（2018-2020年）》的通知",
       "en": "Notice of the Ministry of Industry and Information Technology on Printing and Distributing the Three-Year Action Plan for Promoting the Development of New Generation Artificial Intelligence Industry (2018-2020)",

src/components/AIPoliciesTable.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { PolicyData } from "../types";
 
 interface AIPoliciesTableProps {
@@ -6,6 +6,18 @@ interface AIPoliciesTableProps {
 }
 
 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]) {
@@ -26,56 +38,63 @@ const AIPoliciesTable: React.FC<AIPoliciesTableProps> = ({ policies }) => {
   };
 
   return (
-    <div>
+    <div className="container mx-auto p-6">
       {sortedYears.map((year) => (
-        <div key={year} className="mb-8">
-          <button className="text-xl font-bold mb-2 focus:outline-none">
-            {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>
-          <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>
+          {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>

src/pages/index.tsx

@@ -44,8 +44,8 @@ export async function getStaticProps() {
       zh: policy.zh,
       en: policy.en,
       link: {
-        zh: policy.link,
-        en: policy.link,
+        zh: policy.link.zh || null, // Only include link if provided
+        en: policy.link.en || null, // Only include link if provided
       },
       releaseDate: policy.releaseDate,
     }));