From c4c55a93bc6af8b15f45225169758e08ff1b13cd Mon Sep 17 00:00:00 2001 From: Andrew Lee Date: Mon, 17 Jul 2023 20:42:50 -0400 Subject: Initial rewrite --- components/Header.js | 12 ++++++ components/Navbar.js | 46 ++++++++++++++++++++ components/PSA.js | 42 ++++++++++++++++++ components/psa.json | 5 +++ components/travel-advisory/HistoryModal.js | 42 ++++++++++++++++++ components/travel-advisory/ListCountries.js | 66 +++++++++++++++++++++++++++++ components/updates/DateFormatter.js | 9 ++++ components/updates/PostPreview.js | 15 +++++++ components/updates/getPostMetadata.js | 24 +++++++++++ 9 files changed, 261 insertions(+) create mode 100644 components/Header.js create mode 100644 components/Navbar.js create mode 100644 components/PSA.js create mode 100644 components/psa.json create mode 100644 components/travel-advisory/HistoryModal.js create mode 100644 components/travel-advisory/ListCountries.js create mode 100644 components/updates/DateFormatter.js create mode 100644 components/updates/PostPreview.js create mode 100644 components/updates/getPostMetadata.js (limited to 'components') 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 ( +
+
+

{title}

+

{description}

+
+
+ ) +} + +export default Header; diff --git a/components/Navbar.js b/components/Navbar.js new file mode 100644 index 0000000..14cde83 --- /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 ( + + ) +} + +export default Navbar; diff --git a/components/PSA.js b/components/PSA.js new file mode 100644 index 0000000..8dad8b3 --- /dev/null +++ b/components/PSA.js @@ -0,0 +1,42 @@ +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 = "WARNING!" + styleImportant = "bg-yellow-700" + defaultStyle += ' ' + styleImportant + break; + case 2: + important = "EMERGENCY!" + styleImportant = "bg-red-800" + defaultStyle += ' ' + styleImportant + break; + + } + + return ( +
+

{important}

+
+

{psaMessage.announcement}

+

+ {psaMessage.link && ( + + Learn more ↗ + + )}

+
+
+ ) +} + +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..9ff835a --- /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 ( +
  • {event}
    • + ) + }) + } else { + historyList =
  • Currently no diplomatic tensions in this country.
    • ; + } + + return ( +
    +
    +
    +
    +
    +
    +

    {countries}

    +

    {dangerLevel}

    +
    +
    +

    History

    +
      + {historyList} +
    +
    +
    +
    +
    +
    +
    + ) +} + +export default HistoryModal; diff --git a/components/travel-advisory/ListCountries.js b/components/travel-advisory/ListCountries.js new file mode 100644 index 0000000..6cb0c17 --- /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 = "Safe to travel" + break; + case 1: + dangerLevel = "Reconsider your travel" + break; + case 2: + dangerLevel = "Really reconsider your travel" + break; + case 3: + dangerLevel = "Do not 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 ( +
    +

    {settlement.name}

    +

    {getDangerLevel(settlement.danger)}

    +
    + ) + }) + + return ( +
    +
    +

    {country.name}

    +

    {dangerLevel}

    +
    {settlementsList}
    + +
    + setShowModal(false)} countries={selectedCountry} dangerLevel={selectedDangerLevel} history={selectedCountryHistory} /> +
    + ) + }) +} diff --git a/components/updates/DateFormatter.js b/components/updates/DateFormatter.js new file mode 100644 index 0000000..9e236d0 --- /dev/null +++ b/components/updates/DateFormatter.js @@ -0,0 +1,9 @@ + +import { parseISO, format } from 'date-fns' + +const DateFormatter = (dateString) => { + const date = parseISO(dateString) + return +} + +export default DateFormatter diff --git a/components/updates/PostPreview.js b/components/updates/PostPreview.js new file mode 100644 index 0000000..ca261c0 --- /dev/null +++ b/components/updates/PostPreview.js @@ -0,0 +1,15 @@ +import Link from "next/link"; +import DateFormatter from '@/components/updates/DateFormatter' + +export default function PostPreview(props) { + return ( +
    + +

    {props.title}

    + + By {props.author} +

    {props.description}

    +

    Posted on {DateFormatter(props.date)}

    +
    + ) +} diff --git a/components/updates/getPostMetadata.js b/components/updates/getPostMetadata.js new file mode 100644 index 0000000..515cc79 --- /dev/null +++ b/components/updates/getPostMetadata.js @@ -0,0 +1,24 @@ +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 +} -- cgit v1.2.3