Modularizing certain elements; Working information section

2 files changed, 97 insertions, 459 deletions

diff --git a/app/travel-advisory/countries.json b/app/travel-advisory/countries.json
index 7d031c1..b8fd936 100644
--- a/app/travel-advisory/countries.json
+++ b/app/travel-advisory/countries.json
@@ -2,507 +2,205 @@
     "countries": [
         {
             "name": "Anatoli",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Anatoli City",
-                    "status": 0
-                },
-                {
-                    "name": "Wairua",
-                    "status": 0
-                },
-                {
-                    "name": "Vremya",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/anatoli.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "Auckland",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/auckland.webp",
+            "settlements": [],
             "history": []
         },
         {
-            "name": "Aura Regions, The",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Baxford",
-                    "status": 0
-                },
-                {
-                    "name": "Energy Cove",
-                    "status": 0
-                },
-                {
-                    "name": "Motley Island",
-                    "status": 0
-                },
-                {
-                    "name": "Treasure Island",
-                    "status": 0
-                }
-
-            ],
+            "name": "Aura Regions",
+            "danger": 0,
+            "image": "/countries/auraregions.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "Birch Boat Town",
-            "status": 0,
-            "image": "",
+            "danger": 0,
+            "image": "/countries/birchboattown.webp",
             "settlements": [],
             "history": []
         },
         {
             "name": "Birch Lodges Community Town",
-            "status": 0,
-            "image": "",
+            "danger": 0,
+            "image": "/countries/birchlodges.webp",
             "settlements": [],
             "history": []
         },
         {
             "name": "Country Warp",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/countrywarp.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "Eagle City",
-            "status": 0,
-            "image": "",
+            "danger": 0,
+            "image": "/countries/eaglecity.webp",
             "settlements": [],
             "history": []
         },
         {
             "name": "Fegal",
-            "status": 3,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "danger": 3,
+            "image": "/countries/fegal.webp",
+            "settlements": [],
             "history": [
-                "May 17th 2023: Fegal has border security issues and it has not been solved as of now."
+                "May 17th, 2023: Fegal has border security issues and it has not been solved as of now."
             ]
         },
         {
             "name": "Halcandra",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/halcandra.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "Inkytown",
-            "status": 0,
-            "image": "",
+            "danger": 0,
+            "image": "/countries/inkytown.webp",
             "settlements": [],
             "history": []
         },
         {
-            "name": "Kemonomimi Republic, The",
-            "status": 1,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Melanie City",
-                    "status": 0
-                },
-                {
-                    "name": "Shishiro",
-                    "status": 0
-                },
-                {
-                    "name": "Koinu",
-                    "status": 0
-                },
-                {
-                    "name": "Akiyama",
-                    "status": 0
-                },
-                {
-                    "name": "Elysia",
-                    "status": 0
-                },
-                {
-                    "name": "Sakamoto",
-                    "status": 0
-                },
-                {
-                    "name": "Tsumugi",
-                    "status": 0
-                },
-                {
-                    "name": "Inugake",
-                    "status": 0
-                },
-                {
-                    "name": "Amatsuka",
-                    "status": 0
-                },
-                {
-                    "name": "Calliope",
-                    "status": 0
-                },
-                {
-                    "name": "Rocco Town",
-                    "status": 0
-                },
-                {
-                    "name": "Imari",
-                    "status": 0
-                },
-                {
-                    "name": "Kessoku Island",
-                    "status": 0
-                }
-            ],
+            "name": "Kemonomimi Republic",
+            "danger": 1,
+            "image": "/countries/kemonomimi.webp",
+            "settlements": [],
             "history": [
-                "July 15: KR has internal power issues between the President and Govenor. Governor was trying to form a new government under \"KSSR\"."
+                "July 15th, 2023: KR has internal power issues between the President and Govenor. Governor was trying to form a new government under \"KSSR\"."
             ]
         },
         {
-            "name": "Knowle Regions, The",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "name": "Knowle Regions",
+            "danger": 0,
+            "image": "/countries/knowleregions.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "Lion Land",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/lionland.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "Mart's Extraordinarily Sublime State",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/mess.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "Mojave",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Hebrith",
-                    "status": 0
-                },
-                {
-                    "name": "Symbelton",
-                    "status": 0
-                },
-                {
-                    "name": "Wetlands",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/mojave.webp",
+            "settlements": [],
             "history": []
         },
         {
-            "name": "Open Republic, The",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "New Clygro Town",
-                    "status": 0
-                },
-                {
-                    "name": "New Clygro City",
-                    "status": 0
-                },
-                {
-                    "name": "New Clygro Town Industrial Estate",
-                    "status": 0
-                },
-                {
-                    "name": "Westvalley",
-                    "status": 0
-                },
-                {
-                    "name": "North Coastal Town",
-                    "status": 0
-                },
-                {
-                    "name": "Old Village",
-                    "status": 0
-                },
-                {
-                    "name": "Red Island City",
-                    "status": 0
-                },
-                {
-                    "name": "Pink Island",
-                    "status": 0
-                },
-                {
-                    "name": "Blue Island",
-                    "status": 0
-                },
-                {
-                    "name": "Purple Island",
-                    "status": 0
-                },
-                {
-                    "name": "Yellowtown",
-                    "status": 0
-                },
-                {
-                    "name": "Delancy",
-                    "status": 0
-                },
-                {
-                    "name": "Bordertown",
-                    "status": 0
-                },
-                {
-                    "name": "Small Village",
-                    "status": 0
-                },
-                {
-                    "name": "Murmur Town",
-                    "status": 0
-                }
-            ],
+            "name": "Open Republic",
+            "danger": 0,
+            "image": "/countries/openrepublic.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "PLC",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/plc.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "Plutonia Imperium",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/plutoniaimperium.webp",
+            "settlements": [],
             "history": []
         },
         {
-            "name": "Solstice, The Federal Democracy of",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Firefly",
-                    "status": 0
-                },
-                {
-                    "name": "Szki Lanes",
-                    "status": 0
-                },
-                {
-                    "name": "Prehevil",
-                    "status": 0
-                }
-            ],
-            "history": []
+            "name": "The Federal Democracy of Solstice",
+            "danger": 3,
+            "image": "/countries/solstice.webp",
+            "settlements": [],
+            "history": [
+                "July 16th, 2023: There has been a plague going around SEI, and it has now affected Solstice."
+            ]
         },
         {
-            "name": "Southeastern Islands, The",
-            "status": 2,
-            "image": "",
+            "name": "Southeastern Islands",
+            "danger": 3,
+            "image": "/countries/sei.webp",
             "settlements": [
                 {
-                    "name": "Swamp Island",
-                    "status": 0
-                },
-                {
                     "name": "Forêt Québec",
-                    "status": 3
-                },
-                {
-                    "name": "Longhorn Hills",
-                    "status": 0
-                },
-                {
-                    "name": "Nexus Underground",
-                    "status": 0
+                    "danger": 3
                 }
             ],
             "history": [
-                "July 15: A disease has been going around Forêt Québec, we have decided to put border control in the exit of Alure Regions to SEI"
+                "July 16th, 2023: A nuclear program has started in SEI.",
+                "July 15th, 2023: A disease has been going around Forêt Québec, we have decided to put border control in the exit of Alure Regions to SEI"
             ]
         },
         {
             "name": "Sulópolis",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/sulopolis.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "TAY",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Victor's Interesting City",
-                    "status": 0
-                },
-                {
-                    "name": "Rogueport",
-                    "status": 0
-                },
-                {
-                    "name": "Seven Eleven Rainforest",
-                    "status": 0
-                },
-                {
-                    "name": "Palinode",
-                    "status": 0
-                },
-                {
-                    "name": "Midcity",
-                    "status": 0
-                },
-                {
-                    "name": "Scion of Linda",
-                    "status": 0
-                },
-                {
-                    "name": "Jeremy Forest",
-                    "status": 0
-                },
-                {
-                    "name": "The Eternal Canteloupe",
-                    "status": 0
-                },
-                {
-                    "name": "September Sands",
-                    "status": 0
-                },
-                {
-                    "name": "Belindan Slopes",
-                    "status": 0
-                },
-                {
-                    "name": "Turing Town",
-                    "status": 0
-                },
-                {
-                    "name": "Bell Tower",
-                    "status": 0
-                },
-                {
-                    "name": "Szloch-by-sea",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/tay.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "Union of Soviet Sovereign Republics",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/ussr.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "Veronian Controlled Territories",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/vct.webp",
+            "settlements": [],
             "history": []
         },
         {
-            "name": "Whale City, The Republic of",
-            "status": 0,
-            "image": "",
+            "name": "The Republic of Whale City",
+            "danger": 0,
+            "image": "/countries/whalecity.webp",
             "settlements": [],
             "history": []
         },
         {
-            "name": "Yavno, The Federation of",
-            "status": 0,
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "name": "The Federation of Yavno",
+            "danger": 0,
+            "image": "/countries/yavno.webp",
+            "settlements": [],
             "history": []
         },
         {
-            "name": "You on Kazoo, The Republic of",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "name": "The Republic of You on Kazoo",
+            "danger": 0,
+            "image": "/countries/youonkazoo.webp",
+            "settlements": [],
             "history": []
         }
     ]
diff --git a/app/travel-advisory/page.js b/app/travel-advisory/page.js
index f1442aa..b4d845f 100644
--- a/app/travel-advisory/page.js
+++ b/app/travel-advisory/page.js
@@ -1,66 +1,15 @@
-import countriesData from './countries.json' assert { type: 'json' };
+import ListCountries from "@/components/travel-advisory/ListCountries";
+import Header from "@/components/Header";
 
 export const metadata = {
     title: 'Travel Advisory',
     description: 'Information whether its safe to travel to other countries',
 }
 
-export async function getCountries(){
-    const countries = countriesData.countries;
-
-    return countries.map((country) => {
-        let dangerLevel;
-        switch (country.status) {
-            case 0:
-                dangerLevel = "Take normal security precautions"
-                break;
-            case 1:
-                dangerLevel = "Exercise a high degree of caution"
-                break;
-            case 2:
-                dangerLevel = "Avoid non-essential travel"
-                break;
-            case 3:
-                dangerLevel = "Avoid all travel"
-                break;
-        }
-
-        return (
-            <div key="countries"
-                 className="bg-center bg-no-repeat bg-[url('/regions/silicon-valley.webp')] bg-gray-600 bg-blend-multiply">
-                <div className="sm:px-40 px-10 py-10 space-y-3">
-                    <h1 className="font-medium text-5xl">{country.name}</h1>
-                    <h2 className="text-lg">{dangerLevel}</h2>
-                    <div className="flex flex-row space-x-3">
-                        <button className="bg-blue-600 px-4 py-2">Information</button>
-                        <button className="hidden bg-blue-600 px-4 py-2 settlements">View settlements</button>
-                        <div className="hidden settlements-active:visible">
-                            <h2 className="font-medium text-3xl">City 1</h2>
-                            <h2 className="text-base">Take normal security precautions</h2>
-                            <h2 className="font-medium text-3xl">City 2</h2>
-                            <h2 className="text-base">Take normal security precautions</h2>
-                            <h2 className="font-medium text-3xl">City 3</h2>
-                            <h2 className="text-base">Take normal security precautions</h2>
-                            <h2 className="font-medium text-3xl">City 4</h2>
-                            <h2 className="text-base">Take normal security precautions</h2>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        )
-    })
-}
-
 export default async function TravelAdvisory(){
-    const countries = await getCountries();
     return (
         <main className="flex flex-col">
-            <div className="bg-center bg-no-repeat bg-[url('/jumbotron.webp')] bg-gray-700 bg-blend-multiply">
-                <div className="sm:px-40 px-10 max-w-screen-xl text-left py-24 lg:py-10 space-y-3">
-                    <h1 className="font-medium text-4xl">{metadata.title}</h1>
-                    <h2 className="font-light text-lg">{metadata.description}</h2>
-                </div>
-            </div>
+            <Header title={metadata.title} description={metadata.description} />
             <div>
                 <h1 className="p-5 sm:px-40 px-10 text-3xl" id="legend">Legend</h1>
                 <ul>
@@ -83,17 +32,8 @@ export default async function TravelAdvisory(){
                     </li>
                 </ul>
             </div>
-            <div className="sm:px-40 px-10 py-3 bg-blue-800"><h2 className="font-medium text-lg">This page may be inaccurate at times, refer to the <a href="https://discord.com/channels/277922530973581312/1019705091336446052"  className="text-gray-400 hover:text-gray-300">Minecraft General Announcements</a> channel for the latest updates</h2></div>
-            { /*<div className="bg-center bg-no-repeat bg-[url('/regions/silicon-valley.webp')] bg-gray-600 bg-blend-multiply">
-                <div className="sm:px-40 px-10 py-10 space-y-3">
-                    <h1 className="font-medium text-5xl">Country name</h1>
-                    <h2 className="text-lg">Take normal security precautions</h2>
-                    <div className="flex flex-row space-x-3">
-                    <button className="bg-blue-600 px-4 py-2">Information</button>
-                    </div>
-                </div>
-            </div> */ }
-            {countries}
+            <div className="sm:px-40 px-10 py-3 bg-blue-800"><h2 className="font-medium text-lg"><b className="font-bold">WARNING!</b> This page may be inaccurate at times, refer to the <a href="https://discord.com/channels/277922530973581312/1019705091336446052" className="transition ease-in-out transition-200 text-blue-300 hover:text-blue-200 active:text-blue-500">Minecraft General Announcements</a> channel for the latest updates</h2></div>
+            <ListCountries />
         </main>
     )
 }