diff options
| author | Andrew Lee <alee14498@protonmail.com> | 2023-07-17 15:08:57 -0400 |
|---|---|---|
| committer | Andrew Lee <alee14498@protonmail.com> | 2023-07-17 15:08:57 -0400 |
| commit | ddbe4fa61425f6a871a23238ce15a0929e201e6e (patch) | |
| tree | c1d5c2a0674bcbf2cf79180445d8d26518b7009d | |
| parent | 8fbaca0d8ec9dc1323facb7f4c0029e32cfe5223 (diff) | |
| download | alure-website-ddbe4fa61425f6a871a23238ce15a0929e201e6e.tar.gz alure-website-ddbe4fa61425f6a871a23238ce15a0929e201e6e.tar.bz2 alure-website-ddbe4fa61425f6a871a23238ce15a0929e201e6e.zip | |
Modularizing certain elements; Working information section
44 files changed, 346 insertions, 516 deletions
diff --git a/app/layout.js b/app/layout.js index 97c14ab..fa5c790 100644 --- a/app/layout.js +++ b/app/layout.js @@ -1,7 +1,7 @@ import './globals.css' import { Exo } from 'next/font/google' -import Link from 'next/link' -import Image from "next/image"; +import Navbar from "@/components/Navbar"; +import PSA from "@/components/PSA"; const exo = Exo({ subsets: ['latin'] }) @@ -18,43 +18,11 @@ export default function RootLayout({ children }) { <html lang="en"> <body className={exo.className}> <div className="sm:px-10 px-5 py-0.5 font-medium space-x-3 text-right"> - <a href="https://aircs.racing" className="transition duration-150 ease-out hover:ease-in md:hover:text-blue-500">aircs.racing ↗</a> - <a href="https://alee14.me" className="transition duration-150 ease-out hover:ease-in md:hover:text-blue-500">alee14.me ↗</a> + <a href="https://aircs.racing" className="transition duration-150 ease-out hover:ease-in md:hover:text-red-500">aircs.racing ↗</a> + <a href="https://alee14.me" className="transition duration-150 ease-out hover:ease-in md:hover:text-green-500">alee14.me ↗</a> </div> - <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"> - <Image src="/alure_flag.svg" className="mr-5" alt="Alure Flag" width={70} height={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-gray-100 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"> - <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="hidden w-full md:block md:w-auto" id="navbar-default"> - <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', '#'], - ['Travel Advisory', '/travel-advisory'], - ].map(([title, url]) => ( - <li key="links"> - <Link 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" aria-current="page"> - {title} - </Link> - </li> - ))} - </ul> - </div> - </div> - </nav> + <PSA/> + <Navbar/> {children} <footer className="flex flex-col text-center py-3 space-y-2 bg-blue-950 text-light text-sm sm:text-base px-5 sm:px-0"> <p>Alure Regions is a fictional country made for the bits & Bytes Minecraft Server</p> diff --git a/app/page.js b/app/page.js index 1ff6dab..ec05d34 100644 --- a/app/page.js +++ b/app/page.js @@ -7,8 +7,8 @@ export default function Home() { <main className="flex flex-col"> <div className="bg-center bg-no-repeat bg-[url('/jumbotron.webp')] bg-gray-500 bg-blend-multiply"> <div className="px-4 mx-auto max-w-screen-xl text-center py-24 lg:py-56 space-y-3"> - <h1 className="font-medium md:text-5xl text-2xl">Welcome to the Alure Regions</h1> - <h2 className="font-light md:text-3xl text-lg">The official website of the Government of Alure Regions</h2> + <h1 className="font-medium md:text-5xl text-4xl">Welcome to the Alure Regions</h1> + <h2 className="font-light md:text-3xl text-xl">The official website of the Government of Alure Regions</h2> </div> </div> <ul> @@ -49,9 +49,11 @@ export default function Home() { </div> </li> </ul> - <div className="sm:px-40 px-10 py-3"> + <div className="sm:px-40 px-10 py-3 space-y-3"> <h1 className="text-2xl font-medium" id="about">About Alure Regions</h1> <p>Founded in July 2023, the goal of Alure Regions is to have more freedom on our regions.</p> + <p>Originally Alee Isle Regions then formed to become Southeastern Islands and then split from it.</p> + <p>We strife on trying to become stronger and better, as small regions.</p> <h1 className="text-2xl font-medium">Latest Updates</h1> </div> </main> diff --git a/app/services/page.js b/app/services/page.js new file mode 100644 index 0000000..3e0044d --- /dev/null +++ b/app/services/page.js @@ -0,0 +1,14 @@ +import Header from "@/components/Header"; + +export const metadata = { + title: 'Services', + description: 'Information whether its safe to travel to other countries', +} + +export default function Services() { + return ( + <main className="flex flex-col"> + <Header title={metadata.title} description={metadata.description} /> + </main> + ) +} 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> ) } diff --git a/app/updates/[slug]/page.js b/app/updates/[slug]/page.js index 44c1f07..aa0ef9b 100644 --- a/app/updates/[slug]/page.js +++ b/app/updates/[slug]/page.js @@ -1,7 +1,8 @@ import {readFileSync} from "fs"; import Markdown from "markdown-to-jsx" import matter from "gray-matter"; -import getPostMetadata from "@/components/getPostMetadata"; +import getPostMetadata from "@/components/updates/getPostMetadata"; +import DateFormatter from "@/components/updates/DateFormatter"; const getPostContent = (slug) => { const folder = "posts/"; @@ -25,7 +26,7 @@ export default function PostPage(props) { <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">{post.data.title}</h1> - <h2 className="text-sm">{post.data.author} | {post.data.date}</h2> + <h2 className="text-sm">{post.data.author} | {DateFormatter(post.data.date)}</h2> <h2 className="font-light text-lg">{post.data.description}</h2> </div> </div> diff --git a/app/updates/page.js b/app/updates/page.js index 2055fad..04215c9 100644 --- a/app/updates/page.js +++ b/app/updates/page.js @@ -1,5 +1,6 @@ -import getPostMetadata from "@/components/getPostMetadata"; -import PostPreview from "@/components/PostPreview"; +import getPostMetadata from "@/components/updates/getPostMetadata"; +import PostPreview from "@/components/updates/PostPreview"; +import Header from "@/components/Header"; export const metadata = { title: 'Updates', @@ -13,13 +14,8 @@ export default function Updates() { )); 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="md: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> - <div className="md:px-60 px-2 py-3"> + <Header title={metadata.title} description={metadata.description} /> + <div className="lg:px-60 px-2 py-3"> <div className="px-10 grid grid-cols-1 md:grid-cols-2 gap-4">{postPreviews}</div> </div> </main> diff --git a/components/Header.js b/components/Header.js new file mode 100644 index 0000000..bd70dd0 --- /dev/null +++ b/components/Header.js @@ -0,0 +1,12 @@ +const Header = ({title, description}) => { + return ( + <div className="bg-center bg-no-repeat bg-[url('/jumbotron.webp')] bg-gray-700 bg-blend-multiply"> + <div className="md:px-40 px-10 max-w-screen-xl text-left py-24 lg:py-10 space-y-3"> + <h1 className="font-medium text-4xl">{title}</h1> + <h2 className="font-light text-lg">{description}</h2> + </div> + </div> + ) +} + +export default Header; diff --git a/components/Navbar.js b/components/Navbar.js new file mode 100644 index 0000000..1555eb9 --- /dev/null +++ b/components/Navbar.js @@ -0,0 +1,46 @@ +"use client"; +import Image from "next/image"; +import Link from "next/link"; +import { useState } from "react"; + +const 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"> + <Image src="/alure_flag.svg" className="mr-5" alt="Alure Flag" width={70} height={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 key="links"> + <Link 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} + </Link> + </li> + ))} + </ul> + </div> + </div> + </nav> + ) +} + +export default Navbar; diff --git a/components/PSA.js b/components/PSA.js new file mode 100644 index 0000000..c259f19 --- /dev/null +++ b/components/PSA.js @@ -0,0 +1,38 @@ +import psaMessage from './psa.json' assert { type: 'json' }; +import Link from "next/link"; + +const PSA = () => { + let defaultStyle = "flex flex-row md:px-40 px-30 py-0.5 space-x-4"; + let styleImportant; + let important; + switch (psaMessage.important) { + case 0: + styleImportant = "hidden" + defaultStyle += ' ' + styleImportant + break; + case 1: + important = "WARNING!" + styleImportant = "bg-yellow-700" + defaultStyle += ' ' + styleImportant + break; + case 2: + important = "EMERGENCY!" + styleImportant = "bg-red-800" + defaultStyle += ' ' + styleImportant + break; + + } + + return ( + <div className={defaultStyle}> + <p className="text-lg font-medium">{important}</p> + <p>{psaMessage.announcement} {psaMessage.link && ( + <Link href={psaMessage.link}> + Learn more ↗ + </Link> + )}</p> + </div> + ) +} + +export default PSA; diff --git a/components/psa.json b/components/psa.json new file mode 100644 index 0000000..df9869f --- /dev/null +++ b/components/psa.json @@ -0,0 +1,5 @@ +{ + "important": 0, + "announcement": "No important announcements", + "link": "https://google.ca" +} diff --git a/components/travel-advisory/HistoryModal.js b/components/travel-advisory/HistoryModal.js new file mode 100644 index 0000000..ad9c039 --- /dev/null +++ b/components/travel-advisory/HistoryModal.js @@ -0,0 +1,42 @@ +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 tensions 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-[600px]"> + <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/components/travel-advisory/ListCountries.js b/components/travel-advisory/ListCountries.js new file mode 100644 index 0000000..87e01fc --- /dev/null +++ b/components/travel-advisory/ListCountries.js @@ -0,0 +1,66 @@ +"use client" +import countriesData from '@/app/travel-advisory/countries.json' assert { type: 'json' }; +import HistoryModal from "@/components/travel-advisory/HistoryModal"; +import { useState } from "react"; + +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 default 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 text-3xl">{settlement.name}</h2> + <h2 className="text-base">{getDangerLevel(settlement.danger)}</h2> + </div> + ) + }) + + return ( + <div key="countries" 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 text-5xl">{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/components/DateFormatter.js b/components/updates/DateFormatter.js index 11f3bf3..11f3bf3 100644 --- a/components/DateFormatter.js +++ b/components/updates/DateFormatter.js diff --git a/components/PostPreview.js b/components/updates/PostPreview.js index 083bf2b..ca261c0 100644 --- a/components/PostPreview.js +++ b/components/updates/PostPreview.js @@ -1,5 +1,5 @@ import Link from "next/link"; -//import DateFormatter from '@/components/DateFormatter' +import DateFormatter from '@/components/updates/DateFormatter' export default function PostPreview(props) { return ( @@ -9,7 +9,7 @@ export default function PostPreview(props) { </Link> <span>By {props.author}</span> <p>{props.description}</p> - <p className="font-medium text-sm">Posted on {props.date}</p> + <p className="font-medium text-sm">Posted on {DateFormatter(props.date)}</p> </div> ) } diff --git a/components/getPostMetadata.js b/components/updates/getPostMetadata.js index 88e4566..88e4566 100644 --- a/components/getPostMetadata.js +++ b/components/updates/getPostMetadata.js diff --git a/posts/welcome.md b/posts/welcome.md index b7e28be..8074672 100644 --- a/posts/welcome.md +++ b/posts/welcome.md @@ -3,9 +3,11 @@ title: Website Launched description: Our new website is now available author: The President of the Alure Regions date: '2023-07-15' +tags: ['announcement'] --- -Hello, +# Our new website has officially launched! +As you have seen, we have been actively developing this brand new site! -As you might have seen, we have created a website. What will this website become? +You can expect updates from us, whether if its updating travel advisories or announcing a brand new service within Alure Regions. -First it will be used for updates within Alure Regions, it is used for +Of course, this site will get regularly updated overtime, so stay tuned for more updates to this site! diff --git a/public/countries/anatoli.webp b/public/countries/anatoli.webp Binary files differnew file mode 100644 index 0000000..9d49128 --- /dev/null +++ b/public/countries/anatoli.webp diff --git a/public/countries/auckland.webp b/public/countries/auckland.webp Binary files differnew file mode 100644 index 0000000..9c74eab --- /dev/null +++ b/public/countries/auckland.webp diff --git a/public/countries/auraregions.webp b/public/countries/auraregions.webp Binary files differnew file mode 100644 index 0000000..5338de3 --- /dev/null +++ b/public/countries/auraregions.webp diff --git a/public/countries/birchboattown.webp b/public/countries/birchboattown.webp Binary files differnew file mode 100644 index 0000000..7613f0a --- /dev/null +++ b/public/countries/birchboattown.webp diff --git a/public/countries/birchlodges.webp b/public/countries/birchlodges.webp Binary files differnew file mode 100644 index 0000000..848fc4e --- /dev/null +++ b/public/countries/birchlodges.webp diff --git a/public/countries/countrywarp.webp b/public/countries/countrywarp.webp Binary files differnew file mode 100644 index 0000000..efc399c --- /dev/null +++ b/public/countries/countrywarp.webp diff --git a/public/countries/eaglecity.webp b/public/countries/eaglecity.webp Binary files differnew file mode 100644 index 0000000..1a10f6a --- /dev/null +++ b/public/countries/eaglecity.webp diff --git a/public/countries/fegal.webp b/public/countries/fegal.webp Binary files differnew file mode 100644 index 0000000..d2064e4 --- /dev/null +++ b/public/countries/fegal.webp diff --git a/public/countries/halcandra.webp b/public/countries/halcandra.webp Binary files differnew file mode 100644 index 0000000..370a72b --- /dev/null +++ b/public/countries/halcandra.webp diff --git a/public/countries/inkytown.webp b/public/countries/inkytown.webp Binary files differnew file mode 100644 index 0000000..fde4a86 --- /dev/null +++ b/public/countries/inkytown.webp diff --git a/public/countries/kemonomimi.webp b/public/countries/kemonomimi.webp Binary files differnew file mode 100644 index 0000000..9a2bee6 --- /dev/null +++ b/public/countries/kemonomimi.webp diff --git a/public/countries/knowleregions.webp b/public/countries/knowleregions.webp Binary files differnew file mode 100644 index 0000000..364f014 --- /dev/null +++ b/public/countries/knowleregions.webp diff --git a/public/countries/lionland.webp b/public/countries/lionland.webp Binary files differnew file mode 100644 index 0000000..ed474e3 --- /dev/null +++ b/public/countries/lionland.webp diff --git a/public/countries/mess.webp b/public/countries/mess.webp Binary files differnew file mode 100644 index 0000000..edeb05e --- /dev/null +++ b/public/countries/mess.webp diff --git a/public/countries/mojave.webp b/public/countries/mojave.webp Binary files differnew file mode 100644 index 0000000..485da91 --- /dev/null +++ b/public/countries/mojave.webp diff --git a/public/countries/openrepublic.webp b/public/countries/openrepublic.webp Binary files differnew file mode 100644 index 0000000..4b53425 --- /dev/null +++ b/public/countries/openrepublic.webp diff --git a/public/countries/plc.webp b/public/countries/plc.webp Binary files differnew file mode 100644 index 0000000..281f6d5 --- /dev/null +++ b/public/countries/plc.webp diff --git a/public/countries/plutoniaimperium.webp b/public/countries/plutoniaimperium.webp Binary files differnew file mode 100644 index 0000000..0c1ea9c --- /dev/null +++ b/public/countries/plutoniaimperium.webp diff --git a/public/countries/sei.webp b/public/countries/sei.webp Binary files differnew file mode 100644 index 0000000..b903edc --- /dev/null +++ b/public/countries/sei.webp diff --git a/public/countries/solstice.webp b/public/countries/solstice.webp Binary files differnew file mode 100644 index 0000000..e505786 --- /dev/null +++ b/public/countries/solstice.webp diff --git a/public/countries/sulopolis.webp b/public/countries/sulopolis.webp Binary files differnew file mode 100644 index 0000000..1447ebb --- /dev/null +++ b/public/countries/sulopolis.webp diff --git a/public/countries/tay.webp b/public/countries/tay.webp Binary files differnew file mode 100644 index 0000000..d5a7172 --- /dev/null +++ b/public/countries/tay.webp diff --git a/public/countries/ussr.webp b/public/countries/ussr.webp Binary files differnew file mode 100644 index 0000000..d74be88 --- /dev/null +++ b/public/countries/ussr.webp diff --git a/public/countries/vct.webp b/public/countries/vct.webp Binary files differnew file mode 100644 index 0000000..41bd01d --- /dev/null +++ b/public/countries/vct.webp diff --git a/public/countries/whalecity.webp b/public/countries/whalecity.webp Binary files differnew file mode 100644 index 0000000..67ad2e2 --- /dev/null +++ b/public/countries/whalecity.webp diff --git a/public/countries/yavno.webp b/public/countries/yavno.webp Binary files differnew file mode 100644 index 0000000..f52e8aa --- /dev/null +++ b/public/countries/yavno.webp diff --git a/public/countries/youonkazoo.webp b/public/countries/youonkazoo.webp Binary files differnew file mode 100644 index 0000000..aa035a7 --- /dev/null +++ b/public/countries/youonkazoo.webp |
