map as homepage | small fixes and refactors

MarcoEscaleira · Nov 23, 2023 · 9934dc3 · 9934dc3
1 parent 2d54fd3
commit 9934dc3
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 110 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -2,5 +2,25 @@
   "root": true,
   "extends": ["next/core-web-vitals", "prettier", "plugin:import/recommended"],
   "plugins": ["jsx-a11y"],
-  "rules": {}
+  "rules": {
+    "import/order": [
+      "warn",
+      {
+        "groups": ["builtin", "external", "internal"],
+        "pathGroups": [
+          {
+            "pattern": "react",
+            "group": "external",
+            "position": "before"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["react"],
+        "newlines-between": "never",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ]
+  }
 }
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -1,15 +1,15 @@
 export default function About() {
   return (
-    <div className="w-full h-full flex flex-col justify-center items-center">
-      <h1 className="text-4xl font-semibold text-blue-950 my-4 sm:my-0">About page</h1>
-      <p className="w-8/12 font-light text-center leading-8 sm:leading-10">
+    <div className="w-full h-full flex flex-col items-center">
+      <h1 className="text-3xl font-semibold text-blue-950 my-3 sm:text-4xl sm:my-4">About page</h1>
+      <p className="w-8/12 font-light text-center leading-8 pt-6 sm:pt-10 sm:leading-10">
         My interest in moving around the world has motivated me to work on this project. The current global map shows
         the country name but that does not provide any further information by only pinpointing the country in the map. I
         could not find any interactive quiz map game, therefore I decided to develop such application. Such project can
         grow in multiple directions with several different great features, in the case of Meet the countries the main
         idea was to apply several latest web technologies that combined can form a well-structured production
         application. It’s the core of any app, without a solid foundation and proper roots it can become a failed
-        project. <br /> This geographic quiz was made with 💕 by{" "}
+        project. <br /> This geographic quiz was made with 💕 by&nbsp;
         <a href="https://escaleira.dev" target="_blank" className="text-blue-400 cursor-pointer underline">
           Marco Escaleira
         </a>

diff --git a/src/app/game/page.tsx b/src/app/game/page.tsx
@@ -8,7 +8,7 @@ export default function GamePage() {
 
   return (
     <div className="w-full h-full flex flex-col items-center">
-      <h1 className='text-2xl sm:text-5xl font-semibold text-blue-950 my-12'>Let the game begin...</h1>
+      <h1 className="text-2xl font-semibold text-black mt-3 mb-6 sm:mt-4 sm:mb-8 sm:text-4xl">Let the game begin...</h1>
       <MapChart setTooltipContent={setContent} />
       <Tooltip id="country-tooltip">{content}</Tooltip>
     </div>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,8 +1,8 @@
 import type { Metadata } from "next";
 import { Roboto } from "next/font/google";
+import { Footer } from "@/components/Footer";
 import { Header } from "@/components/Header";
 import "./globals.css";
-import { Footer } from "@/components/Footer";
 
 const roboto = Roboto({
   weight: ["300", "400", "500", "700"],
@@ -24,7 +24,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html lang="en">
       <body className={roboto.className}>
         <Header />
-        <main className="flex flex-col w-full h-[calc(100%-64px-174px)] sm:h-[calc(100%-64px-102px)]">{children}</main>
+        <main className="flex flex-col w-screen h-screen relative">{children}</main>
         <Footer />
       </body>
     </html>

diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,33 +1,50 @@
+"use client";
 import Image from "next/image";
 import Link from "next/link";
+import { Map, MapProvider, NavigationControl } from "react-map-gl";
+import "mapbox-gl/dist/mapbox-gl.css";
 
 export default function Home() {
   return (
-    <div className="w-full h-full flex flex-col items-center justify-center">
-      <Image priority src="/images/planet-earth.svg" width={180} height={180} alt="Planet Earth" className="mb-10" />
-      <h1 className="text-4xl font-semibold text-blue-950 mb-4">Meet the Countries</h1>
-      <p className="text-lg font-light text-gray-400 text-center px-4 sm:px-0 mb-8">
-        Do you dare to come with us on this journey to meet countries never explored?
-      </p>
-      <div className="flex justify-center items-center gap-6">
-        <Link
-          href="/map"
-          className="inline-flex items-center justify-center p-0.5 text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-blue-600 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white focus:ring-4 focus:outline-none focus:ring-green-200 shadow-md"
-        >
-          <span className="px-5 py-2.5 transition-all ease-in duration-75 bg-white rounded-md group-hover:bg-opacity-0">
-            Get started 🚀
-          </span>
-        </Link>
+    <MapProvider>
+      <Map
+        id="quizMap"
+        mapboxAccessToken="pk.eyJ1IjoibWFyY29lc2NhbGVpcmFkbXUiLCJhIjoiY2xwN29ldHIwMG16bjJxbXJhZXc5dXUxOSJ9.ZP0gYeYBB-nL5py2RANUOw"
+        initialViewState={{
+          longitude: 5,
+          latitude: 46,
+          zoom: 4,
+        }}
+        style={{ width: "100%", height: "100%", position: "relative" }}
+        mapStyle="mapbox://styles/marcoescaleiradmu/clp7mzxrf01q701qycptw1thq"
+      >
+        <section className="absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-100 bg-opacity-70 rounded-2xl p-3 w-80 sm:w-auto sm:p-8 flex flex-col items-center justify-center">
+          <Image
+            priority
+            src="/images/planet-earth.svg"
+            width={180}
+            height={180}
+            alt="Planet Earth"
+            className="mb-10 w-32 h-32 sm:w-44 sm:h-44"
+          />
+          <h1 className="text-3xl sm:text-4xl font-semibold text-blue-950 text-center mb-4">Meet the Countries</h1>
+          <p className="w-full mb-4 text-base font-light text-black text-center sm:w-2/3 sm:text-lg sm:mb-8">
+            Do you dare to come with us on this journey to meet countries never explored?
+          </p>
+          <div className="flex justify-center items-center gap-6">
+            <Link
+              href="/game"
+              className="inline-flex items-center justify-center p-0.5 text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-blue-600 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white focus:ring-4 focus:outline-none focus:ring-green-200 shadow-md"
+            >
+              <span className="px-5 py-2.5 transition-all ease-in duration-75 bg-white rounded-md group-hover:bg-opacity-0">
+                Get started 🚀
+              </span>
+            </Link>
+          </div>
+        </section>
 
-        <p className="font-light">or</p>
-
-        <Link
-          href="/map"
-          className="py-3 px-6 bg-blue-600 hover:bg-blue-700 text-white shadow-md rounded-full transition ease-in duration-200"
-        >
-          Explore
-        </Link>
-      </div>
-    </div>
+        <NavigationControl position="bottom-right" showCompass />
+      </Map>
+    </MapProvider>
   );
 }
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -3,29 +3,20 @@ import Link from "next/link";
 
 export function Footer() {
   return (
-    <footer className="bg-white">
-      <div className="container flex flex-col items-center justify-between p-6 mx-auto space-y-4 sm:space-y-0 sm:flex-row">
+    <footer className="absolute bottom-0 left-0 w-full flex justify-center">
+      <section className="container flex items-center justify-between p-6 sm:p-4">
         <Link href="/">
           <Image src="/images/mtc-logo.svg" width={58} height={54} alt="Planet Earth" className="" />
         </Link>
 
-        <p className="text-sm text-gray-600 dark:text-gray-300">
-          © Copyright {new Date().getFullYear()}. All Rights Reserved.
-        </p>
+        <nav className="flex justify-center flex-grow">
+          <Link href="/about" className="text-sky-400 underline">
+            About
+          </Link>
+        </nav>
 
-        <div className="flex">
-          <a
-            href="https://github.com/MarcoEscaleira/meetthecountries-frontend"
-            target="_blank"
-            className="mx-2 text-gray-600 transition-colors duration-300 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400"
-            aria-label="Github"
-          >
-            <svg className="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z"></path>
-            </svg>
-          </a>
-        </div>
-      </div>
+        <span></span>
+      </section>
     </footer>
   );
 }
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,42 +1,11 @@
 "use client";
-import { FC } from "react";
-import Link from "next/link";
-import Image from "next/image";
 import { UserIcon } from "@heroicons/react/24/solid";
-import { usePathname } from "next/navigation";
-
-export const MenuLink: FC<{
-  href: string;
-  title: string;
-  isActive: boolean;
-}> = ({ href, title, isActive }) => {
-  return (
-    <Link
-      href={href}
-      className={`w-16 sm:w-32 text-sm sm:text-md py-2 font-medium text-center text-white ${
-        isActive ? "bg-blue-500" : ""
-      } transition-colors duration-300 transform bg-blue-200 rounded-lg hover:bg-blue-500`}
-    >
-      {title}
-    </Link>
-  );
-};
 
 export function Header() {
-  const pathname = usePathname();
-
   return (
-    <header className="w-full h-16 px-2 sm:px-8 flex justify-center">
-      <div className="flex container gap-2 justify-between items-center">
-        <Link href="/">
-          <Image src="/images/mtc-logo.svg" width={40} height={40} alt="Planet Earth" className="w-10 sm:w-16" />
-        </Link>
-        <nav className="flex gap-2 sm:gap-8 items-center">
-          <MenuLink href="/" title="Home" isActive={pathname === "/"} />
-          <MenuLink href="/game" title="Game" isActive={pathname === "/game"} />
-          <MenuLink href="/about" title="About" isActive={pathname === "/about"} />
-        </nav>
-        <UserIcon className="w-8 sm:w-10 h-10 cursor-pointer" />
+    <header className="absolute top-0 left-0 z-10 w-full px-4 py-2 sm:px-6 sm:py-4">
+      <div className="flex justify-end items-center">
+        <UserIcon className="w-8 h-10 cursor-pointer sm:w-10" />
       </div>
     </header>
   );