v0.5.0-alpha

components/ColorPickerInput.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import { Input, useTheme } from '@geist-ui/react';
+import { Input, useClickAway, useTheme } from '@geist-ui/react';
 import React from 'react';
 import ColorPicker from './ColorPicker';
 import InputLabel from './InputLabel';
@@ -24,12 +24,21 @@ const ColorPickerInput: React.FC<Props> = ({
         setColor(v, type);
     };
     const theme = useTheme();
+    const ref = React.useRef<HTMLDivElement>();
     const [open, setOpen] = React.useState<boolean>(false);
+    // @ts-ignore
+    useClickAway(ref, () => {
+        if (open) {
+            setOpen(false);
+        }
+    });
     return (
         <>
             <InputLabel text={placeHolder} />
             <div className="flex">
                 <div
+                    // @ts-ignore
+                    ref={ref}
                     className="flex-center picker-box pointer relative"
                     onClick={() => setOpen(!open)}>
                     {open && (

components/MiniColorPicker.tsx

@@ -5,7 +5,7 @@
 import { colorPickerPalette } from '@/data/colors';
 import getColorUsed from '@/lib/getColorUsed';
 import { MapStoreType } from '@/typings/map.store';
-import { useTheme } from '@geist-ui/react';
+import { useClickAway, useTheme } from '@geist-ui/react';
 import React from 'react';
 
 interface Props {
@@ -34,9 +34,18 @@ const MiniColorPicker: React.FC<Props> = ({ index, bgColor, map, setMap }) => {
             mapData: copy
         }));
     };
+    const ref = React.useRef<HTMLDivElement>();
+    // @ts-ignore
+    useClickAway(ref, () => {
+        if (open) {
+            setOpen(false);
+        }
+    });
     return (
         <>
             <div
+                // @ts-ignore
+                ref={ref}
                 style={{ backgroundColor: bgColor }}
                 onClick={() => setOpen(!open)}
                 className="box pointer">

data/Austria/AustriaStateCodes.tsx

@@ -0,0 +1,11 @@
+export const AustriaStateCodes = {
+    burgenland: 'Burgenland',
+    carinthia: 'Carinthia',
+    'lower-austria': 'Lower Austria',
+    salzburg: 'Salzburg',
+    styria: 'Styria',
+    tyrol: 'Tyrol',
+    'upper-austria': 'Upper Austria',
+    vienna: 'Vienna',
+    vorarlberg: 'Vorarlberg'
+};

data/Mercator/Mercator.map.tsx

@@ -7,7 +7,7 @@ const MercatorMap = () => (
         name="mercator"
         // @ts-ignore
         strokeWidth={0.5}
-        width={1000}
+        width={1200}
         viewBox={[0, 0, 1010, 666]}
         stateCodes={MercatorStateCodes}>
         <path

data/Pro/ProStateCodes.tsx

@@ -0,0 +1,218 @@
+export const ProStateCodes = {
+    AF: 'Afghanistan',
+    AO: 'Angola',
+    AL: 'Albania',
+    AE: 'United Arab Emirates',
+    AR: 'Argentina',
+    AM: 'Armenia',
+    AU: 'Australia',
+    AT: 'Austria',
+    AZ: 'Azerbaijan',
+    BI: 'Burundi',
+    BE: 'Belgium',
+    BJ: 'Benin',
+    BF: 'Burkina Faso',
+    BD: 'Bangladesh',
+    BG: 'Bulgaria',
+    BA: 'Bosnia and Herzegovina',
+    BY: 'Belarus',
+    BZ: 'Belize',
+    BO: 'Bolivia',
+    BR: 'Brazil',
+    BN: 'Brunei Darussalam',
+    BT: 'Bhutan',
+    BW: 'Botswana',
+    CF: 'Central African Republic',
+    CA: 'Canada',
+    CH: 'Switzerland',
+    CL: 'Chile',
+    CN: 'China',
+    CI: "Côte d'Ivoire",
+    CM: 'Cameroon',
+    CD: 'Democratic Republic of the Congo',
+    CG: 'Republic of Congo',
+    CO: 'Colombia',
+    CR: 'Costa Rica',
+    CU: 'Cuba',
+    CZ: 'Czech Republic',
+    DE: 'Germany',
+    DJ: 'Djibouti',
+    DK: 'Denmark',
+    DO: 'Dominican Republic',
+    DZ: 'Algeria',
+    EC: 'Ecuador',
+    EG: 'Egypt',
+    ER: 'Eritrea',
+    EE: 'Estonia',
+    ET: 'Ethiopia',
+    FI: 'Finland',
+    FJ: 'Fiji',
+    GA: 'Gabon',
+    GB: 'United Kingdom',
+    GE: 'Georgia',
+    GH: 'Ghana',
+    GN: 'Guinea',
+    GM: 'The Gambia',
+    GW: 'Guinea-Bissau',
+    GQ: 'Equatorial Guinea',
+    GR: 'Greece',
+    GL: 'Greenland',
+    GT: 'Guatemala',
+    GY: 'Guyana',
+    HN: 'Honduras',
+    HR: 'Croatia',
+    HT: 'Haiti',
+    HU: 'Hungary',
+    ID: 'Indonesia',
+    IN: 'India',
+    IE: 'Ireland',
+    IR: 'Iran',
+    IQ: 'Iraq',
+    IS: 'Iceland',
+    IL: 'Israel',
+    IT: 'Italy',
+    JM: 'Jamaica',
+    JO: 'Jordan',
+    JP: 'Japan',
+    KZ: 'Kazakhstan',
+    KE: 'Kenya',
+    KG: 'Kyrgyzstan',
+    KH: 'Cambodia',
+    KR: 'Republic of Korea',
+    // "XK": "Kosovo",
+    KW: 'Kuwait',
+    LA: 'Lao PDR',
+    LB: 'Lebanon',
+    LR: 'Liberia',
+    LY: 'Libya',
+    LK: 'Sri Lanka',
+    LS: 'Lesotho',
+    LT: 'Lithuania',
+    LU: 'Luxembourg',
+    LV: 'Latvia',
+    MA: 'Morocco',
+    MD: 'Moldova',
+    MG: 'Madagascar',
+    MX: 'Mexico',
+    MK: 'Macedonia',
+    ML: 'Mali',
+    MM: 'Myanmar',
+    ME: 'Montenegro',
+    MN: 'Mongolia',
+    MZ: 'Mozambique',
+    MR: 'Mauritania',
+    MW: 'Malawi',
+    MY: 'Malaysia',
+    NA: 'Namibia',
+    NE: 'Niger',
+    NG: 'Nigeria',
+    NI: 'Nicaragua',
+    NL: 'Netherlands',
+    NO: 'Norway',
+    NP: 'Nepal',
+    NZ: 'New Zealand',
+    OM: 'Oman',
+    PK: 'Pakistan',
+    PA: 'Panama',
+    PE: 'Peru',
+    PH: 'Philippines',
+    PG: 'Papua New Guinea',
+    PL: 'Poland',
+    KP: 'Dem. Rep. Korea',
+    PT: 'Portugal',
+    PY: 'Paraguay',
+    PS: 'Palestine',
+    QA: 'Qatar',
+    RO: 'Romania',
+    RU: 'Russia',
+    RW: 'Rwanda',
+    EH: 'Western Sahara',
+    SA: 'Saudi Arabia',
+    SD: 'Sudan',
+    SS: 'South Sudan',
+    SN: 'Senegal',
+    SL: 'Sierra Leone',
+    SV: 'El Salvador',
+    RS: 'Serbia',
+    SR: 'Suriname',
+    SK: 'Slovakia',
+    SI: 'Slovenia',
+    SE: 'Sweden',
+    SZ: 'Swaziland',
+    SY: 'Syria',
+    TD: 'Chad',
+    TG: 'Togo',
+    TH: 'Thailand',
+    TJ: 'Tajikistan',
+    TM: 'Turkmenistan',
+    TL: 'Timor-Leste',
+    TN: 'Tunisia',
+    TR: 'Turkey',
+    TW: 'Taiwan',
+    TZ: 'Tanzania',
+    UG: 'Uganda',
+    UA: 'Ukraine',
+    UY: 'Uruguay',
+    US: 'United States',
+    UZ: 'Uzbekistan',
+    VE: 'Venezuela',
+    VN: 'Vietnam',
+    VU: 'Vanuatu',
+    YE: 'Yemen',
+    ZA: 'South Africa',
+    ZM: 'Zambia',
+    ZW: 'Zimbabwe',
+    SO: 'Somalia',
+    GF: 'France',
+    FR: 'France',
+    ES: 'Spain',
+    AW: 'Aruba',
+    AI: 'Anguilla',
+    AD: 'Andorra',
+    AG: 'Antigua and Barbuda',
+    BS: 'Bahamas',
+    BM: 'Bermuda',
+    BB: 'Barbados',
+    KM: 'Comoros',
+    CV: 'Cape Verde',
+    KY: 'Cayman Islands',
+    DM: 'Dominica',
+    FK: 'Falkland Islands',
+    FO: 'Faeroe Islands',
+    GD: 'Grenada',
+    HK: 'Hong Kong',
+    KN: 'Saint Kitts and Nevis',
+    LC: 'Saint Lucia',
+    LI: 'Liechtenstein',
+    // "MF": "Saint Martin (French)",
+    MV: 'Maldives',
+    MT: 'Malta',
+    MS: 'Montserrat',
+    MU: 'Mauritius',
+    NC: 'New Caledonia',
+    NR: 'Nauru',
+    PN: 'Pitcairn Islands',
+    PR: 'Puerto Rico',
+    PF: 'French Polynesia',
+    SG: 'Singapore',
+    SB: 'Solomon Islands',
+    ST: 'São Tomé and Principe',
+    SX: 'Saint Martin (Dutch)',
+    SC: 'Seychelles',
+    TC: 'Turks and Caicos Islands',
+    TO: 'Tonga',
+    TT: 'Trinidad and Tobago',
+    VC: 'Saint Vincent and the Grenadines',
+    VG: 'British Virgin Islands',
+    VI: 'United States Virgin Islands',
+    CY: 'Cyprus',
+    RE: 'Reunion (France)',
+    YT: 'Mayotte (France)',
+    MQ: 'Martinique (France)',
+    GP: 'Guadeloupe (France)',
+    CW: 'Curaco (Netherlands)',
+    IC: 'Canary Islands (Spain)',
+    ANTARTICA: 'Antartica',
+    'NEW-CADELONIA': 'New Caledonia',
+    XK: 'Kosovo'
+};

data/World/World.map.tsx

@@ -5,7 +5,7 @@ import { WorldCountryCodes } from './WorldCountryCodes';
 export const WorldMap = () => (
     <MapLayout
         name="world"
-        width={1000}
+        width={1200}
         viewBox={[50, 0, 1412, 707]}
         stateCodes={WorldCountryCodes}>
         <path

data/WorldPacific/WorldPacific.map.tsx

@@ -5,7 +5,7 @@ import { WorldPacificStateCodes } from './WorldPacificStateCodes';
 const WorldPacificMap = () => (
     <MapLayout
         name="worldpacific"
-        width={1000}
+        width={1200}
         viewBox={[0, 0, 2000, 868]}
         stateCodes={WorldPacificStateCodes}>
         <path

layouts/MainLayout.tsx

@@ -23,13 +23,6 @@ const MainLayout = ({ children, showNav = false }: Props) => (
         </footer>
 
         <style jsx>{`
-            .page {
-                display: flex;
-                flex-direction: column;
-                max-width: 1000px;
-                margin: 0 auto;
-                overflow-x: hidden !important;
-            }
             .navbar-ctx {
                 width: 100%;
                 position: sticky;
@@ -48,10 +41,6 @@ const MainLayout = ({ children, showNav = false }: Props) => (
                 backdrop-filter: blur(20px);
             }
             @media screen and (max-width: 1000px) {
-                .page {
-                    width: 100%;
-                    padding: 0 10px;
-                }
                 .navbar-ctx,
                 .footer-ctx {
                     padding: 0 10px;

layouts/MapMainLayout.tsx

@@ -0,0 +1,51 @@
+/* eslint-disable react/require-default-props */
+import Navbar from '@/components/Navbar';
+import Footer from '@/components/Footer';
+import React from 'react';
+
+interface Props {
+    children: React.ReactNode;
+    showNav?: boolean;
+}
+
+const MapMainLayout = ({ children, showNav = false }: Props) => (
+    <>
+        <nav id="nav" className="navbar-ctx">
+            <Navbar showNav={showNav} />
+        </nav>
+
+        <main>{children}</main>
+
+        <footer className="footer-ctx">
+            <Footer />
+        </footer>
+
+        <style jsx>{`
+            .navbar-ctx {
+                width: 100%;
+                position: sticky;
+                top: 0;
+                right: 0;
+                left: 0;
+                z-index: 1000;
+                border-top: 1px solid rgba(141, 147, 171, 0.3);
+                border-bottom: 1px solid rgba(141, 147, 171, 0.3);
+                backdrop-filter: blur(20px);
+            }
+            .footer-ctx {
+                width: 100%;
+                border-top: 1px solid rgba(141, 147, 171, 0.3);
+                border-bottom: 1px solid rgba(141, 147, 171, 0.3);
+                backdrop-filter: blur(20px);
+            }
+            @media screen and (max-width: 1000px) {
+                .navbar-ctx,
+                .footer-ctx {
+                    padding: 0 10px;
+                }
+            }
+        `}</style>
+    </>
+);
+
+export default MapMainLayout;