diff options
| author | Andrew Lee <alee14498@protonmail.com> | 2023-07-19 00:48:11 -0400 |
|---|---|---|
| committer | Andrew Lee <alee14498@protonmail.com> | 2023-07-19 00:48:11 -0400 |
| commit | d57226e5a802ecd6607faf67f32621e2da725a35 (patch) | |
| tree | d2073bbc14409095c61255ea83b2ca3815df309d /components | |
| parent | 3c80755e70aa85daa59edc5dbe200400894254c7 (diff) | |
| download | alure-website-d57226e5a802ecd6607faf67f32621e2da725a35.tar.gz alure-website-d57226e5a802ecd6607faf67f32621e2da725a35.tar.bz2 alure-website-d57226e5a802ecd6607faf67f32621e2da725a35.zip | |
Moved all components to app folder
Diffstat (limited to 'components')
| -rw-r--r-- | components/Header.js | 12 | ||||
| -rw-r--r-- | components/Navbar.js | 46 | ||||
| -rw-r--r-- | components/PSA.js | 47 | ||||
| -rw-r--r-- | components/psa.json | 5 | ||||
| -rw-r--r-- | components/travel-advisory/HistoryModal.js | 40 | ||||
| -rw-r--r-- | components/travel-advisory/ListCountries.js | 66 | ||||
| -rw-r--r-- | components/updates/DateFormatter.js | 9 | ||||
| -rw-r--r-- | components/updates/PostPreview.js | 15 | ||||
| -rw-r--r-- | components/updates/getPostMetadata.js | 24 |
9 files changed, 0 insertions, 264 deletions
diff --git a/components/Header.js b/components/Header.js deleted file mode 100644 index bd70dd0..0000000 --- a/components/Header.js +++ /dev/null @@ -1,12 +0,0 @@ -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 deleted file mode 100644 index 1555eb9..0000000 --- a/components/Navbar.js +++ /dev/null @@ -1,46 +0,0 @@ -"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 deleted file mode 100644 index 06bf9ba..0000000 --- a/components/PSA.js +++ /dev/null @@ -1,47 +0,0 @@ -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-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; - - } - - return ( - <div className={defaultStyle}> - <p className="text-lg font-medium">{important}</p> - <div className="flex flex-row space-x-3"> - <p>{psaMessage.announcement}</p> - <p className="text-blue-200 hover:text-blue-500 active:text-blue-700"> - {psaMessage.link && ( - <Link href={psaMessage.link}> - Learn more ↗ - </Link> - )}</p> - </div> - </div> - ) -} - -export default PSA; diff --git a/components/psa.json b/components/psa.json deleted file mode 100644 index df9869f..0000000 --- a/components/psa.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "important": 0, - "announcement": "No important announcements", - "link": "https://google.ca" -} diff --git a/components/travel-advisory/HistoryModal.js b/components/travel-advisory/HistoryModal.js deleted file mode 100644 index 3ef2ea8..0000000 --- a/components/travel-advisory/HistoryModal.js +++ /dev/null @@ -1,40 +0,0 @@ -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-[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/components/travel-advisory/ListCountries.js b/components/travel-advisory/ListCountries.js deleted file mode 100644 index 078af5c..0000000 --- a/components/travel-advisory/ListCountries.js +++ /dev/null @@ -1,66 +0,0 @@ -"use client" -import countriesData from '@/app/travel-advisory/countries.json' assert { type: 'json' }; -import HistoryModal from "@/components/travel-advisory/HistoryModal"; -import { useState } from "react"; - -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" 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/components/updates/DateFormatter.js b/components/updates/DateFormatter.js deleted file mode 100644 index 9e236d0..0000000 --- a/components/updates/DateFormatter.js +++ /dev/null @@ -1,9 +0,0 @@ - -import { parseISO, format } from 'date-fns' - -const DateFormatter = (dateString) => { - const date = parseISO(dateString) - return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time> -} - -export default DateFormatter diff --git a/components/updates/PostPreview.js b/components/updates/PostPreview.js deleted file mode 100644 index ec9183d..0000000 --- a/components/updates/PostPreview.js +++ /dev/null @@ -1,15 +0,0 @@ -import Link from "next/link"; -import DateFormatter from '@/components/updates/DateFormatter' - -export default function PostPreview(props) { - return ( - <div key="post" className="bg-zinc-800 py-3 px-5 border border-gray-600 rounded-lg space-y-3"> - <Link href={`/updates/${props.slug}`}> - <h2 className="font-medium text-2xl hover:underline">{props.title}</h2> - </Link> - <span className="text-sm">{props.author}</span> - <p>{props.description}</p> - <p className="font-medium text-sm">Posted on {DateFormatter(props.date)}</p> - </div> - ) -} diff --git a/components/updates/getPostMetadata.js b/components/updates/getPostMetadata.js deleted file mode 100644 index 515cc79..0000000 --- a/components/updates/getPostMetadata.js +++ /dev/null @@ -1,24 +0,0 @@ -import {readdirSync, readFileSync} from "fs"; -import matter from "gray-matter"; - -export default function getPostMetadata() { - const folder = "posts/"; - const files = readdirSync(folder); - const markdownPosts = files.filter((file) => file.endsWith(".md")); - - const posts = markdownPosts.map((fileName) => { - const fileContent = readFileSync(`posts/${fileName}`, "utf-8"); - const matterResult = matter(fileContent); - return { - title: matterResult.data.title, - author: matterResult.data.author, - date: matterResult.data.date, - description: matterResult.data.description, - slug: fileName.replace(".md", "") - } - }) - - // Sort the posts by date in descending order - posts.sort((a, b) => new Date(b.date) - new Date(a.date)); - return posts -} |
