import * as React from "react";
import WorldMap from "react-svg-worldmap";
import { populationData } from "../../data/CountryData";

export default function App(): JSX.Element {
  return (
    <WorldMap
      color="red"
      tooltipBgColor="blue"
      title="Top 10 Populous Countries Small Map"
      valueSuffix="people"
      size="sm"
      data={populationData}
      frame
    />
  );
}

import * as React from "react";
import WorldMap from "react-svg-worldmap";
import { GDPData } from "../../data/CountryData";

export default function App(): JSX.Element {
  return (
    <WorldMap
      color="green"
      tooltipBgColor="purple"
      title="Top 10 GDP per Capita Medium Map"
      valuePrefix="$"
      size="md"
      data={GDPData}
      frame
    />
  );
}

import * as React from "react";
import WorldMap from "react-svg-worldmap";
import { populationData } from "../../data/CountryData";

export default function App(): JSX.Element {
  return (
    <WorldMap
      color="red"
      tooltipBgColor="blue"
      title="Top 10 Populous Countries Large Map"
      borderColor="blue"
      frameColor="pink"
      valueSuffix="people"
      size="lg"
      data={populationData}
      frame
    />
  );
}

import * as React from "react";
import WorldMap from "react-svg-worldmap";
import { GDPData } from "../../data/CountryData";

export default function App(): JSX.Element {
  return (
    <WorldMap
      color="green"
      tooltipBgColor="purple"
      title="Top 10 GDP per Capita Extra Large Map"
      valuePrefix="$"
      size="xl"
      data={GDPData}
      frame
    />
  );
}

import * as React from "react";
import WorldMap from "react-svg-worldmap";
import { GDPData } from "../../data/CountryData";

export default function App(): JSX.Element {
  return (
    <WorldMap
      color="yellow"
      tooltipBgColor="black"
      title="Top 10 GDP per Capita Extra Extra Large Map"
      valuePrefix="$"
      size="xxl"
      data={GDPData}
      frame
    />
  );
}

import * as React from "react";
import WorldMap from "react-svg-worldmap";
import { GDPData } from "../../data/CountryData";

export default function App(): JSX.Element {
  return (
    <WorldMap
      color="pink"
      tooltipBgColor="black"
      title="Top 10 GDP per Capita Responsive Map"
      valuePrefix="$"
      size="responsive"
      data={GDPData}
      frame
    />
  );
}

import * as React from "react";
import WorldMap from "react-svg-worldmap";
import { GDPData } from "../../data/CountryData";

export default function App(): JSX.Element {
  return (
    <WorldMap
      color="#39cac4"
      tooltipBgColor="black"
      title="Top 10 GDP per Capita Numerically Sized Map"
      valuePrefix="$"
      size={100}
      data={GDPData}
      frame
    />
  );
}