🗺 Adds components for displaying flag and map

src/components/misc/Flag.tsx

@@ -0,0 +1,20 @@
+interface Props {
+  countryCode: string,
+  width: number,
+};
+
+const Flag = ({ countryCode, width }: Props): JSX.Element => {
+
+  const getFlagUrl = (code: string, w: number = 64) => {
+    const protocol = 'https';
+    const cdn = 'flagcdn.com';
+    const dimensions = `${width}x${width * 0.75}`;
+    const country = countryCode.toLowerCase();
+    const ext = 'png';
+    return `${protocol}://${cdn}/${dimensions}/${country}.${ext}`;
+  };
+
+  return (<img src={getFlagUrl(countryCode, width)} alt={countryCode} />);
+}
+
+export default Flag;

src/components/misc/LocationMap.tsx

@@ -0,0 +1,59 @@
+import {
+  ComposableMap,
+  Geographies,
+  Geography,
+  Annotation,
+} from 'react-simple-maps';
+
+import colors from 'styles/colors';
+import MapFeatures from 'assets/data/map-features.json';
+
+interface Props {
+  lat: number,
+  lon: number,
+  label?: string,
+};
+
+const MapChart = (location: Props) => {
+  const { lat, lon, label } = location;
+
+  return (
+    <ComposableMap
+      projection="geoAzimuthalEqualArea"
+      projectionConfig={{
+        rotate: [0, 0, 0],
+        center: [lon + 5, lat - 25],
+        scale: 200
+      }}
+    >
+      <Geographies
+        geography={MapFeatures}
+        fill={colors.backgroundDarker}
+        stroke={colors.primary}
+        strokeWidth={0.5}
+      >
+        {({ geographies }) =>
+          geographies.map((geo) => (
+            <Geography key={geo.rsmKey} geography={geo} />
+          ))
+        }
+      </Geographies>
+      <Annotation
+        subject={[lon, lat]}
+        dx={-80}
+        dy={-80}
+        connectorProps={{
+          stroke: colors.textColor,
+          strokeWidth: 3,
+          strokeLinecap: "round"
+        }}
+      >
+        <text x="-8" textAnchor="end" fill={colors.textColor} fontSize={25}>
+          {label || "Server"}
+        </text>
+      </Annotation>
+    </ComposableMap>
+  );
+};
+
+export default MapChart;