Initial rewrite to astro

6 files changed, 444 insertions, 0 deletions

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
new file mode 100644
index 0000000..63b2010
--- /dev/null
+++ b/src/components/Navbar.jsx
@@ -0,0 +1,41 @@
+import { useState } from "preact/hooks";
+export default function Navbar(){
+    const [navbar, setNavbar] = useState(false);
+    return (
+        <nav className="border-gray-200 bg-neutral-900">
+            <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+                <div className="flex items-center">
+                    <img src="/alure_flag.svg" className="mr-5" alt="Alure Flag" height="70" width="70"/>
+                    <span className="self-center text-2xl font-medium whitespace-nowrap dark:text-white"><p>Government</p><p>of Alure Regions</p></span>
+                </div>
+            <button data-collapse-toggle="navbar-default" type="button"
+                    className="transition duration-150 ease-out hover:ease-in inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-zinc-600 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+                    aria-controls="navbar-default" aria-expanded="false" onClick={() => setNavbar(!navbar)}>
+                <span className="sr-only">Open main menu</span>
+                <svg className="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                     viewBox="0 0 17 14">
+                    <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
+                          d="M1 1h15M1 7h15M1 13h15"/>
+                </svg>
+            </button>
+            <div className={`w-full md:block md:w-auto ${navbar ? 'block' : 'hidden' }`}>
+                <ul className="font-medium text-lg flex flex-col p-4 md:p-0 mt-4 rounded-lg md:flex-row md:space-x-8 md:mt-0">
+                    {[
+                        ['Home', '/'],
+                        ['Updates', '/updates'],
+                        ['Services', '/services'],
+                        ['Travel Advisory', '/travel-advisory'],
+                    ].map(([title, url]) => (
+                        <li>
+                            <a href={url} className="transition duration-150 ease-out hover:ease-in block py-2 pl-3 pr-4 rounded md:border-0 md:p-0 text-white md:hover:text-blue-500 hover:bg-gray-700 hover:text-white md:hover:bg-transparent" onClick={() => setNavbar(!navbar)}>
+                                {title}
+                            </a>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+</nav>
+
+)
+}
diff --git a/src/components/PSA.astro b/src/components/PSA.astro
new file mode 100644
index 0000000..ad2bcdf
--- /dev/null
+++ b/src/components/PSA.astro
@@ -0,0 +1,40 @@
+---
+import psaMessage from "./psa.json";
+let defaultStyle = "flex flex-row md:px-40 sm:px-30 sm:py-0.5 p-3 space-x-2";
+let styleImportant;
+let important;
+switch (psaMessage.important) {
+    case 0:
+        styleImportant = "hidden"
+        defaultStyle += ' ' + styleImportant
+        break;
+    case 1:
+        important = "Latest News:"
+        styleImportant = "bg-zinc-700"
+        defaultStyle += ' ' + styleImportant
+        break;
+    case 2:
+        important = "WARNING!"
+        styleImportant = "bg-yellow-700"
+        defaultStyle += ' ' + styleImportant
+        break;
+    case 3:
+        important = "EMERGENCY!"
+        styleImportant = "bg-red-800"
+        defaultStyle += ' ' + styleImportant
+        break;
+}
+---
+
+<div class={defaultStyle}>
+    <p class="text-lg font-medium sm:p-0">{important}</p>
+    <div class="flex sm:flex-row flex-col sm:space-x-3">
+        <p>{psaMessage.announcement}</p>
+        <p class="text-blue-200 hover:text-blue-500 active:text-blue-700">
+            {psaMessage.link && (
+                    <a href={psaMessage.link}>
+                        Learn more ↗
+                    </a>
+            )}</p>
+    </div>
+</div>
diff --git a/src/components/psa.json b/src/components/psa.json
new file mode 100644
index 0000000..d0d28ce
--- /dev/null
+++ b/src/components/psa.json
@@ -0,0 +1,5 @@
+{
+  "important": 0,
+  "announcement": "No important announcements at this time.",
+  "link": "/travel-advisory"
+}
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": []
+        }
+    ]
+}