diff options
Diffstat (limited to 'src/components/travel-advisory')
| -rw-r--r-- | src/components/travel-advisory/HistoryModal.jsx | 40 | ||||
| -rw-r--r-- | src/components/travel-advisory/ListCountries.jsx | 65 | ||||
| -rw-r--r-- | src/components/travel-advisory/countries.json | 253 |
3 files changed, 358 insertions, 0 deletions
diff --git a/src/components/travel-advisory/HistoryModal.jsx b/src/components/travel-advisory/HistoryModal.jsx new file mode 100644 index 0000000..6449a6a --- /dev/null +++ b/src/components/travel-advisory/HistoryModal.jsx @@ -0,0 +1,40 @@ +const HistoryModal = ({ isVisible, onClose, countries, dangerLevel, history }) => { + if (!isVisible) return null; + const handleClose = (e) => { + if(e.target.id === 'wrapper') onClose(); + } + + let historyList; + if (history && history.length > 0) { + historyList = history.map((event, index) => { + return ( + <li key={index}>{event}</li> + ) + }) + } else { + historyList = <li>Currently no diplomatic/medical issues in this country.</li>; + } + + return ( + <div id="wrapper" className="fixed inset-0 bg bg-opacity-25 backdrop-blur-sm flex justify-center items-center" onClick={handleClose}> + <div className="w-[700px]"> + <div className="flex flex-col"> + <div className="bg-zinc-800 p-5 rounded-lg border border-gray-700"> + <div className="divide-y space-y-3"> + <div> + <h1 className="font-medium text-3xl">{countries}</h1> + <h2 className="font-medium text-xl">{dangerLevel}</h2> + </div> + <div> + <h1 className="font-medium text-2xl pt-3">History</h1> + <ul>{historyList}</ul> + </div> + </div> + </div> + </div> + </div> + </div> + ) +} + +export default HistoryModal; diff --git a/src/components/travel-advisory/ListCountries.jsx b/src/components/travel-advisory/ListCountries.jsx new file mode 100644 index 0000000..57817af --- /dev/null +++ b/src/components/travel-advisory/ListCountries.jsx @@ -0,0 +1,65 @@ +import countriesData from './countries.json' assert { type: 'json' }; +import HistoryModal from "./HistoryModal"; +import { useState } from "preact/hooks"; + +export function getDangerLevel(danger) { + let dangerLevel; + switch (danger) { + 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; + default: + dangerLevel = "Seems like the danger level is broken!" + break; + } + + return dangerLevel; +} + +export function Countries(){ + // eslint-disable-next-line react-hooks/rules-of-hooks + const [showModal, setShowModal] = useState(false); + const [selectedCountry, setSelectedCountry] = useState(null); + const [selectedDangerLevel, setSelectedDangerLevel] = useState(null); + const [selectedCountryHistory, setSelectedCountryHistory] = useState(null); + const countries = countriesData.countries; + + return countries.map((country) => { + let dangerLevel = getDangerLevel(country.danger); + + const settlementsList = country.settlements.map((settlement) => { + return ( + <div key={settlement.name}> + <h2 className="font-medium md:text-3xl text-xl">{settlement.name}</h2> + <h2 className="text-base">{getDangerLevel(settlement.danger)}</h2> + </div> + ) + }) + + return ( + <div key="countries" id={'#' + country.url} className="bg-center bg-no-repeat bg-[image:var(--image-url)] bg-gray-500 bg-blend-multiply" style={{'--image-url': `url(${country.image})`}} > + <div className="sm:px-40 px-10 py-10 space-y-3"> + <h1 className="font-medium md:text-5xl text-3xl">{country.name}</h1> + <h2 className="text-lg">{dangerLevel}</h2> + <div className="space-y-3">{settlementsList}</div> + <button className="transition duration-200 ease-in-out px-4 py-2 font-medium rounded-full bg-blue-600 hover:bg-blue-700 active:bg-blue-800" onClick={()=> { + setSelectedCountry(country.name); + setSelectedDangerLevel(dangerLevel) + setSelectedCountryHistory(country.history) + setShowModal(true) + }}>Information</button> + </div> + <HistoryModal isVisible={showModal} onClose={() => setShowModal(false)} countries={selectedCountry} dangerLevel={selectedDangerLevel} history={selectedCountryHistory} /> + </div> + ) + }) +} diff --git a/src/components/travel-advisory/countries.json b/src/components/travel-advisory/countries.json new file mode 100644 index 0000000..f50474c --- /dev/null +++ b/src/components/travel-advisory/countries.json @@ -0,0 +1,253 @@ +{ + "countries": [ + { + "name": "Anatoli", + "url": "anatoli", + "danger": 0, + "image": "/countries/anatoli.webp", + "settlements": [], + "history": [] + }, + { + "name": "Auckland", + "url": "auckland", + "danger": 0, + "image": "/countries/auckland.webp", + "settlements": [], + "history": [] + }, + { + "name": "Aura Regions", + "url": "auraregions", + "danger": 0, + "image": "/countries/auraregions.webp", + "settlements": [], + "history": [] + }, + { + "name": "Birch Boat Town", + "url": "birchboattown", + "danger": 0, + "image": "/countries/birchboattown.webp", + "settlements": [], + "history": [] + }, + { + "name": "Birch Lodges Community Town", + "url": "birchlodges", + "danger": 0, + "image": "/countries/birchlodges.webp", + "settlements": [], + "history": [] + }, + { + "name": "Country Warp", + "url": "countrywarp", + "danger": 0, + "image": "/countries/countrywarp.webp", + "settlements": [], + "history": [] + }, + { + "name": "The Federation of Doodads and Gizmos", + "url": "doodadsandgizmos", + "danger": 0, + "image": "/countries/doodadsandgizmos.webp", + "settlements": [], + "history": [] + }, + { + "name": "Eagle City", + "url": "eaglecity", + "danger": 0, + "image": "/countries/eaglecity.webp", + "settlements": [], + "history": [] + }, + { + "name": "Fegal", + "url": "fegal", + "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." + ] + }, + { + "name": "Halcandra", + "url": "halcandra", + "danger": 0, + "image": "/countries/halcandra.webp", + "settlements": [], + "history": [] + }, + { + "name": "Inkytown", + "url": "inkytown", + "danger": 0, + "image": "/countries/inkytown.webp", + "settlements": [], + "history": [] + }, + { + "name": "Kemonomimi Republic", + "url": "kemonomimi-republic", + "danger": 0, + "image": "/countries/kemonomimi.webp", + "settlements": [], + "history": [] + }, + { + "name": "Knowle Regions", + "url": "knowle-regions", + "danger": 0, + "image": "/countries/knowleregions.webp", + "settlements": [], + "history": [] + }, + { + "name": "Lion Land", + "url": "lionland", + "danger": 0, + "image": "/countries/lionland.webp", + "settlements": [], + "history": [] + }, + { + "name": "landrepeatland", + "url": "landrepeatland", + "danger": 0, + "image": "/countries/landrepeatland.webp", + "settlements": [], + "history": [] + }, + { + "name": "Mart's Extraordinarily Sublime State", + "url": "mess", + "danger": 0, + "image": "/countries/mess.webp", + "settlements": [], + "history": [] + }, + { + "name": "Mojave", + "url": "mojave", + "danger": 0, + "image": "/countries/mojave.webp", + "settlements": [], + "history": [] + }, + { + "name": "Open Republic", + "url": "open-republic", + "danger": 0, + "image": "/countries/openrepublic.webp", + "settlements": [], + "history": [] + }, + { + "name": "PLC", + "url": "plc", + "danger": 0, + "image": "/countries/plc.webp", + "settlements": [], + "history": [] + }, + { + "name": "Plutonia Imperium", + "url": "plutonia-imperium", + "danger": 0, + "image": "/countries/plutoniaimperium.webp", + "settlements": [], + "history": [] + }, + { + "name": "The Federal Democracy of Solstice", + "url": "solstice", + "danger": 0, + "image": "/countries/solstice.webp", + "settlements": [], + "history": [] + }, + { + "name": "Southeastern Islands", + "url": "southeastern-islands", + "danger": 1, + "image": "/countries/sei.webp", + "settlements": [ + { + "name": "Forêt Québec", + "danger": 3 + } + ], + "history": [ + "July 15th, 2023: Frequent instances of instability have been surfacing in Forêt Québec lately." + ] + }, + { + "name": "Sulópolis", + "url": "sulopolis", + "danger": 0, + "image": "/countries/sulopolis.webp", + "settlements": [], + "history": [] + }, + { + "name": "TAY", + "url": "tay", + "danger": 0, + "image": "/countries/tay.webp", + "settlements": [], + "history": [] + }, + { + "name": "Union of Soviet Sovereign Republics", + "url": "ussr", + "danger": 0, + "image": "/countries/ussr.webp", + "settlements": [], + "history": [] + }, + { + "name": "Veronian Controlled Territories", + "url": "veronian-controlled-territories", + "danger": 0, + "image": "/countries/vct.webp", + "settlements": [], + "history": [] + }, + { + "name": "Vyxalla", + "url": "vyxalla", + "danger": 0, + "image": "/countries/vyxalla.webp", + "settlements": [], + "history": [] + }, + { + "name": "The Republic of Whale City", + "url": "whale-city", + "danger": 0, + "image": "/countries/whalecity.webp", + "settlements": [], + "history": [] + }, + { + "name": "The Federation of Yavno", + "url": "yavno", + "danger": 0, + "image": "/countries/yavno.webp", + "settlements": [], + "history": [] + }, + { + "name": "The Republic of You on Kazoo", + "url": "you-on-kazoo", + "danger": 0, + "image": "/countries/youonkazoo.webp", + "settlements": [], + "history": [] + } + ] +} |