added tailwind & heroicons, restyled page

src/CalendarApi.tsx

@@ -1,3 +1,4 @@
+import { ArrowLeftIcon, ArrowPathIcon, ArrowRightIcon } from '@heroicons/react/24/solid';
 import { useEffect, useState } from "react";
 
 type Holiday = { "date": string, "localName": string, "countryCode": string, "fixed": string, "global": string, "types": string[] }
@@ -7,10 +8,17 @@ async function getText(satYear: string): Promise<Holiday[]> {
 }
 
 function ListHolidays() {
+    const currentYear = new Date().getFullYear().toString();
     const [loading, setLoading] = useState<boolean>(true);
     const [keys, setKeys] = useState<Holiday[]>([]);
-    const [year, setYear] = useState<string>("2024");
-    const [satYear, setSatYear] = useState<string>("2024");
+    const [year, setYear] = useState<string>(currentYear);
+    const [satYear, setSatYear] = useState<string>(currentYear);
+
+    function addYear(i: number): void {
+        const newyear: string = (parseInt(satYear) + i).toString();
+        setYear(newyear);
+        setSatYear(newyear);
+    }
 
     useEffect(() => {
         getText(satYear).then((value) => {
@@ -18,40 +26,40 @@ function ListHolidays() {
             setLoading(false);
         });
     }, [satYear])
-    return <>
-        <div>
-            <div>
-                {loading ?
+    return <div className="flex flex-col gap-3 m-5">
+        <div className="flex justify-center">
+            {loading ?
                 <>Loading ...</>
                 :
-                <table>
+                <table className="border-collapse border-black border-2">
                     <thead>
-                        <tr>
+                        <tr className="bg-gray-200 dark:bg-gray-800">
                             <th>Date</th>
                             <th>Name</th>
                         </tr>
                     </thead>
                     <tbody>
                         {keys.map((holiday) =>
-                            <tr key={holiday.date + "-" + holiday.localName}>
-                                <td>
-                                    {holiday.date}
+                            <tr key={holiday.date + "-" + holiday.localName} className="odd:bg-gray-100 even:bg-gray-200 dark:odd:bg-gray-700 dark:even:bg-gray-800">
+                                <td className="p-1 px-3 text-right">
+                                    {new Date(holiday.date).toLocaleDateString()}
                                 </td>
-                                <td>
+                                <td className="p-1 px-3">
                                     {holiday.localName}
                                 </td>
                             </tr>
                         )}
                     </tbody>
                 </table>
-                }
-            </div>
-            <div>
-                <input type="number" value={year} onChange={(e) => { setYear(e.target.value) }} />
-                <input type="submit" onClick={() => { setSatYear(year) }} />
-            </div>
+            }
         </div>
-    </>
+        <div className="flex justify-center">
+            <ArrowLeftIcon className='icon' onClick={() => addYear(-1)} />
+            <input className="text-black text-right border-black border-2" type="number" value={year} onChange={(e) => { setYear(e.target.value) }} />
+            <ArrowPathIcon className='icon' onClick={() => setSatYear(year)} />
+            <ArrowRightIcon className='icon' onClick={() => addYear(1)} />
+        </div>
+    </div>
 }
 
 export default ListHolidays;

src/main.css

@@ -1,51 +1,7 @@
-@media (prefers-color-scheme: light) {
-    :root {
-        --textcolor: black;
-        --backgroundcolor: white;
-        --color-one: lightgray;
-        --color-two: darkgray;
-    }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        --textcolor: white;
-        --backgroundcolor: black;
-        --color-one: gray;
-        --color-two: dimgray;
-    }
-}
-
-html {
-    background-color: var(--backgroundcolor);
-}
-
-#root>div {
-    margin: auto;
-    width: fit-content;
-}
-
-#root>div>div {
-    margin: 8px;
-}
-
-table {
-    color: var(--textcolor);
-    border: var(--textcolor) solid 2px;
-    border-collapse: collapse;
-}
-
-th,
-td {
-    padding: 4px;
-    border: black solid 1px;
-}
-
-tbody>tr:nth-child(even),
-table>thead>tr {
-    background-color: var(--color-one);
-}
-
-tbody>tr:nth-child(odd) {
-    background-color: var(--color-two);
+.icon {
+    @apply size-5 hover:text-gray-500 transition-all duration-200 m-2;
 }