Working travel advisor*

1 files changed, 49 insertions, 13 deletions

diff --git a/app/travel-advisory/page.js b/app/travel-advisory/page.js
index 5db351c..f1442aa 100644
--- a/app/travel-advisory/page.js
+++ b/app/travel-advisory/page.js
@@ -1,4 +1,4 @@
-import { readFileSync } from "fs";
+import countriesData from './countries.json' assert { type: 'json' };
 
 export const metadata = {
     title: 'Travel Advisory',
@@ -6,12 +6,53 @@ export const metadata = {
 }
 
 export async function getCountries(){
-    const files = readdirSync('./countries.json');
+    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">
@@ -43,21 +84,16 @@ export default async function TravelAdvisory(){
                 </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 ">
+            { /*<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>
-                    <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 className="flex flex-row space-x-3">
                     <button className="bg-blue-600 px-4 py-2">Information</button>
+                    </div>
                 </div>
-            </div>
+            </div> */ }
+            {countries}
         </main>
     )
 }