diff options
Diffstat (limited to 'app/travel-advisory/page.js')
| -rw-r--r-- | app/travel-advisory/page.js | 62 |
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> ) } |