Carte du monde interactive avec React et D3.js

2,669 fance

Ouvrir dans l'éditeur Publiez votre code

Carte du monde interactive avec React et D3.js

Recommandé

13 June 2025

Un code de Metehan

18 September 2024

Connexion du pirate informatique

23 August 2024

Page de destination de React Netflix

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Global Network - Countries World Map</title>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://unpkg.com/topojson-client@3"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
      rel="stylesheet" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

body {
        font-family: "Inter", sans-serif;
        background: linear-gradient(to bottom right, #020617, #0f172a, #020617);
        color: #f8fafc;
        min-height: 100vh;
      }

.container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 1.5rem;
      }

.card {
        background: rgba(30, 41, 59, 0.4);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(148, 163, 184, 0.1);
        border-radius: 1rem;
        padding: 1.5rem;
      }

.country-card {
        background: rgba(30, 41, 59, 0.6);
        border: 1px solid rgba(148, 163, 184, 0.2);
        border-radius: 0.75rem;
        padding: 0.75rem;
        transition: all 0.2s;
        cursor: pointer;
      }

.country-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
      }

.region-button {
        width: 100%;
        text-align: left;
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
        transition: all 0.2s;
        border: 1px solid transparent;
        background: transparent;
        color: #cbd5e1;
        cursor: pointer;
      }

.region-button:hover {
        background: rgba(59, 130, 246, 0.1);
        border-color: rgba(59, 130, 246, 0.3);
      }

.region-button.active {
        background: #3b82f6;
        color: white;
        font-weight: 600;
      }

.stat-bar {
        height: 8px;
        border-radius: 4px;
        transition: width 0.5s ease;
      }

.tooltip {
        position: fixed;
        background: rgba(30, 41, 59, 0.95);
        backdrop-filter: blur(12px);
        border: 2px solid #3b82f6;
        border-radius: 0.75rem;
        padding: 1rem;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        pointer-events: none;
        z-index: 1000;
      }

svg {
        width: 100%;
        height: 100%;
      }

svg .country {
        transition: all 0.2s ease;
      }

@media (max-width: 1024px) {
        .grid-responsive {
          grid-template-columns: 1fr !important;
        }
      }

@media (max-width: 767px) and (min-width: 640px) {
        .grid-responsive {
          grid-template-columns: 1fr !important;
          grid-template-rows: 600px auto auto !important;
          gap: 1.5rem !important;
        }

.map-section {
          grid-column: 1 !important;
          grid-row: 1 !important;
        }

.middle-row {
          grid-column: 1 !important;
          grid-row: 2 !important;
          display: grid !important;
          grid-template-columns: 1fr 1fr !important;
          gap: 1.5rem !important;
        }

.countries-section {
          grid-column: 1 !important;
          grid-row: 3 !important;
        }

.sidebar-section {
          display: none !important;
        }
      }

@media (max-width: 639px) {
        .grid-responsive {
          grid-template-columns: 1fr !important;
          grid-template-rows: 500px auto auto auto !important;
          gap: 1.5rem !important;
        }

.map-section {
          grid-column: 1 !important;
          grid-row: 1 !important;
        }

.regions-mobile {
          grid-column: 1 !important;
          grid-row: 2 !important;
          display: block !important;
        }

.statistics-mobile {
          grid-column: 1 !important;
          grid-row: 3 !important;
          display: block !important;
        }

.countries-section {
          grid-column: 1 !important;
          grid-row: 4 !important;
        }

.sidebar-section,
        .middle-row {
          display: none !important;
        }
      }

.middle-row,
      .regions-mobile,
      .statistics-mobile {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const {useState, useEffect, useRef} = React;

const regions = [
        {
          name: "Southeast Asia",
          color: "#10b981",
          countries: [
            {name: "Singapore", code: "SGP", coordinates: [1.3521, 103.8198]},
            {name: "Thailand", code: "THA", coordinates: [15.87, 100.9925]},
            {name: "Indonesia", code: "IDN", coordinates: [-0.7893, 113.9213]},
            {name: "Vietnam", code: "VNM", coordinates: [14.0583, 108.2772]},
            {name: "Philippines", code: "PHL", coordinates: [12.8797, 121.774]},
            {name: "Brunei", code: "BRN", coordinates: [4.5353, 114.7277]},
            {name: "Cambodia", code: "KHM", coordinates: [12.5657, 104.991]},
          ],
        },
        {
          name: "South Asia",
          color: "#3b82f6",
          countries: [
            {name: "India", code: "IND", coordinates: [20.5937, 78.9629]},
            {name: "Bangladesh", code: "BGD", coordinates: [23.685, 90.3563]},
            {name: "Sri Lanka", code: "LKA", coordinates: [7.8731, 80.7718]},
            {name: "Pakistan", code: "PAK", coordinates: [30.3753, 69.3451]},
            {name: "Nepal", code: "NPL", coordinates: [28.3949, 84.124]},
          ],
        },
        {
          name: "East Asia",
          color: "#8b5cf6",
          countries: [
            {name: "China", code: "CHN", coordinates: [35.8617, 104.1954]},
            {name: "Japan", code: "JPN", coordinates: [36.2048, 138.2529]},
            {
              name: "South Korea",
              code: "KOR",
              coordinates: [35.9078, 127.7669],
            },
            {name: "Taiwan", code: "TWN", coordinates: [23.6978, 120.9605]},
          ],
        },
        {
          name: "Middle East",
          color: "#f59e0b",
          countries: [
            {
              name: "Saudi Arabia",
              code: "SAU",
              coordinates: [23.8859, 45.0792],
            },
            {name: "Qatar", code: "QAT", coordinates: [25.3548, 51.1839]},
            {
              name: "Emirates",
              code: "ARE",
              coordinates: [23.4241, 53.8478],
            },
            {name: "Oman", code: "OMN", coordinates: [21.4735, 55.9754]},
            {name: "Syria", code: "SYR", coordinates: [34.8021, 38.9968]},
            {name: "Jordan", code: "JOR", coordinates: [30.5852, 36.2384]},
          ],
        },
        {
          name: "Europe",
          color: "#ec4899",
          countries: [
            {
              name: "United Kingdom",
              code: "GBR",
              coordinates: [55.3781, -3.436],
            },
            {name: "France", code: "FRA", coordinates: [46.2276, 2.2137]},
            {name: "Germany", code: "DEU", coordinates: [51.1657, 10.4515]},
            {name: "Italy", code: "ITA", coordinates: [41.8719, 12.5674]},
            {name: "Spain", code: "ESP", coordinates: [40.4637, -3.7492]},
            {name: "Türkiye", code: "TUR", coordinates: [38.9637, 35.2433]},
          ],
        },
        {
          name: "Africa",
          color: "#ef4444",
          countries: [
            {name: "Egypt", code: "EGY", coordinates: [26.8206, 30.8025]},
            {name: "Morocco", code: "MAR", coordinates: [31.7917, -7.0926]},
            {
              name: "South Africa",
              code: "ZAF",
              coordinates: [-30.5595, 22.9375],
            },
            {name: "Kenya", code: "KEN", coordinates: [-0.0236, 37.9062]},
          ],
        },
        {
          name: "Oceania",
          color: "#06b6d4",
          countries: [
            {name: "Australia", code: "AUS", coordinates: [-25.2744, 133.7751]},
            {
              name: "New Zealand",
              code: "NZL",
              coordinates: [-40.9006, 174.886],
            },
          ],
        },
      ];

const WIDTH = 1200;
      const HEIGHT = 600;

const projection = d3
        .geoMercator()
        .scale(WIDTH / (2 * Math.PI))
        .translate([WIDTH / 2, HEIGHT / 2]);

const pathGenerator = d3.geoPath().projection(projection);

function findRegionForCountryCode(code) {
        for (const r of regions) {
          if (r.countries.some((c) => c.code === code)) return r;
        }
        return null;
      }

function findRegionForCountryName(name) {
        for (const r of regions) {
          if (r.countries.some((c) => c.name === name || c.code === name))
            return r;
        }
        return null;
      }

const latLngToXYOld = (lat, lng) => {
        const x = ((lng + 180) / 360) * WIDTH;
        const y = ((90 - lat) / 180) * HEIGHT;
        return {x, y};
      };

function InteractiveWorldMap({selectedRegion}) {
        const svgRef = useRef(null);
        const [geojson, setGeojson] = useState(null);
        const [selectedCountry, setSelectedCountry] = useState(null);
        const [mousePos, setMousePos] = useState({x: 0, y: 0});
        const [hoveredCode, setHoveredCode] = useState(null);
        const mapContainerRef = useRef(null);

useEffect(() => {
          const url =
            "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson";
          d3.json(url)
            .then((data) => {
              setGeojson(data);
            })
            .catch((err) => {
              console.error("Failed to load GeoJSON:", err);
            });
        }, []);

useEffect(() => {
          if (!geojson) return;
          const svg = d3.select(svgRef.current);
          svg.selectAll("*").remove();

const defs = svg.append("defs");
          defs
            .append("pattern")
            .attr("id", "grid")
            .attr("width", 40)
            .attr("height", 40)
            .attr("patternUnits", "userSpaceOnUse")
            .append("path")
            .attr("d", "M 40 0 L 0 0 0 40")
            .attr("fill", "none")
            .attr("stroke", "#334155")
            .attr("stroke-width", 0.5)
            .attr("opacity", 0.3);

svg
            .append("rect")
            .attr("width", WIDTH)
            .attr("height", HEIGHT)
            .attr("fill", "url(#grid)");

const worldGroup = svg.append("g").attr("class", "world-base");
          worldGroup
            .selectAll("path")
            .data(geojson.features)
            .join("path")
            .attr("d", pathGenerator)
            .attr("fill", "rgba(148,163,184,0.04)")
            .attr("stroke", "rgba(148,163,184,0.06)")
            .attr("stroke-width", 0.3);

const featureByName = new Map();
          geojson.features.forEach((f) => {
            const n =
              f.properties && f.properties.name
                ? f.properties.name.toLowerCase()
                : null;
            if (n) featureByName.set(n, f);
          });

const countryGroup = svg
            .append("g")
            .attr("class", "translated-countries");
          const unmatched = [];

regions.forEach((region) => {
            region.countries.forEach((c) => {
              if (selectedRegion && region.name !== selectedRegion) {
                return;
              }

const targetNameLower = c.name.toLowerCase();

let feature =
                featureByName.get(targetNameLower) ||
                featureByName.get(
                  targetNameLower.replace("turkiye", "turkey")
                ) ||
                featureByName.get(
                  targetNameLower.replace(
                    "united kingdom",
                    "united kingdom of great britain and northern ireland"
                  )
                ) ||
                null;

if (!feature) {
                for (const [k, f] of featureByName.entries()) {
                  if (
                    k.includes(targetNameLower) ||
                    targetNameLower.includes(k)
                  ) {
                    feature = f;
                    break;
                  }
                }
              }

if (!feature) {
                unmatched.push(c.name);
                return;
              }

const g = countryGroup
                .append("g")
                .attr("class", "country-wrapper");
              const path = g
                .append("path")
                .datum(feature)
                .attr("d", pathGenerator)
                .attr("fill", region.color)
                .attr("opacity", selectedRegion ? 0.3 : 0.15)
                .attr("stroke", region.color)
                .attr("stroke-width", selectedRegion ? 0.8 : 0.4)
                .style("cursor", "pointer");

let centroid;
              try {
                centroid = pathGenerator.centroid(feature);
                if (!Array.isArray(centroid) || isNaN(centroid[0])) {
                  const bounds = pathGenerator.bounds(feature);
                  centroid = [
                    (bounds[0][0] + bounds[1][0]) / 2,
                    (bounds[0][1] + bounds[1][1]) / 2,
                  ];
                }
              } catch (e) {
                const bounds = pathGenerator.bounds(feature);
                centroid = [
                  (bounds[0][0] + bounds[1][0]) / 2,
                  (bounds[0][1] + bounds[1][1]) / 2,
                ];
              }

const desired = projection([c.coordinates[1], c.coordinates[0]]);
              const dx = desired[0] - centroid[0];
              const dy = desired[1] - centroid[1];

g.attr("transform", `translate(${dx},${dy})`);

g.on("mouseenter", (event) => {
                setHoveredCode(c.code);
                setSelectedCountry(c);

const mapRect = mapContainerRef.current.getBoundingClientRect();
                const relativeX = event.clientX - mapRect.left;
                const relativeY = event.clientY - mapRect.top;

setMousePos({x: relativeX, y: relativeY});
                path
                  .transition()
                  .duration(120)
                  .attr("opacity", selectedRegion ? 0.6 : 0.45);
              });

g.on("mousemove", (event) => {
                const mapRect = mapContainerRef.current.getBoundingClientRect();
                const relativeX = event.clientX - mapRect.left;
                const relativeY = event.clientY - mapRect.top;

setMousePos({x: relativeX, y: relativeY});
              });

g.on("mouseleave", () => {
                setHoveredCode(null);
                setSelectedCountry(null);
                path
                  .transition()
                  .duration(120)
                  .attr("opacity", selectedRegion ? 0.3 : 0.15);
              });

g.append("circle")
                .attr("cx", desired[0] - dx)
                .attr("cy", desired[1] - dy)
                .attr("r", selectedRegion ? 10 : 8)
                .attr("fill", region.color)
                .attr("opacity", selectedRegion ? 0.8 : 0.6)
                .style("pointer-events", "none");

g.append("circle")
                .attr("cx", desired[0] - dx)
                .attr("cy", desired[1] - dy)
                .attr("r", selectedRegion ? 5 : 4)
                .attr("fill", region.color)
                .style("pointer-events", "none");
            });
          });

if (unmatched.length) {
            console.warn(
              "Some country names could not be matched to GeoJSON features:",
              unmatched
            );
          }

svg
            .append("line")
            .attr("x1", 0)
            .attr("y1", HEIGHT / 2)
            .attr("x2", WIDTH)
            .attr("y2", HEIGHT / 2)
            .attr("stroke", "#475569")
            .attr("stroke-width", 1)
            .attr("opacity", 0.5)
            .attr("stroke-dasharray", "5,5");

svg
            .append("line")
            .attr("x1", WIDTH / 2)
            .attr("y1", 0)
            .attr("x2", WIDTH / 2)
            .attr("y2", HEIGHT)
            .attr("stroke", "#475569")
            .attr("stroke-width", 1)
            .attr("opacity", 0.5)
            .attr("stroke-dasharray", "5,5");
        }, [geojson, selectedRegion]);

return (
          <div
            ref={mapContainerRef}
            style={{
              position: "relative",
              width: "100%",
              height: "100%",
              background: "rgba(15, 23, 42, 0.5)",
              borderRadius: "0.75rem",
              overflow: "hidden",
            }}>
            <svg
              ref={svgRef}
              viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
              style={{width: "100%", height: "100%", maxHeight: "600px"}}
            />

{selectedCountry && (
              <div
                className="tooltip tooltip-left"
                style={{
                  left: `${mousePos.x}px`,
                  top: `${mousePos.y}px`,
                }}>
                <div
                  style={{
                    fontWeight: "bold",
                    fontSize: "1.125rem",
                    marginBottom: "0.25rem",
                  }}>
                  {selectedCountry.name}
                </div>
                <div style={{fontSize: "0.875rem", color: "#94a3b8"}}>
                  {selectedCountry.coordinates[0].toFixed(2)}°,{" "}
                  {selectedCountry.coordinates[1].toFixed(2)}°
                </div>
                <div
                  style={{
                    fontSize: "0.75rem",
                    color: "#3b82f6",
                    marginTop: "0.25rem",
                  }}>
                  {
                    regions.find((r) =>
                      r.countries.some((c) => c.code === selectedCountry.code)
                    )?.name
                  }
                </div>
              </div>
            )}
          </div>
        );
      }

function RegionButtons({selectedRegion, setSelectedRegion}) {
        return (
          <div
            style={{display: "flex", flexDirection: "column", gap: "0.5rem"}}>
            <button
              onClick={() => setSelectedRegion(null)}
              className={`region-button ${!selectedRegion ? "active" : ""}`}>
              <span>All Regions ({regions.length})</span>
            </button>
            {regions.map((region) => (
              <button
                key={region.name}
                onClick={() => setSelectedRegion(region.name)}
                className={`region-button ${
                  selectedRegion === region.name ? "active" : ""
                }`}
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                }}>
                <div
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: "0.5rem",
                  }}>
                  <div
                    style={{
                      width: "12px",
                      height: "12px",
                      borderRadius: "50%",
                      background: region.color,
                    }}></div>
                  <span>{region.name}</span>
                </div>
                <span style={{fontSize: "0.875rem", opacity: 0.7}}>
                  {region.countries.length}
                </span>
              </button>
            ))}
          </div>
        );
      }

function Statistics({regions, totalCountries}) {
        return (
          <div style={{display: "flex", flexDirection: "column", gap: "1rem"}}>
            {regions.map((region) => (
              <div key={region.name}>
                <div
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    marginBottom: "0.5rem",
                    fontSize: "0.875rem",
                  }}>
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      gap: "0.5rem",
                    }}>
                    <div
                      style={{
                        width: "8px",
                        height: "8px",
                        borderRadius: "50%",
                        background: region.color,
                      }}></div>
                    <span>{region.name}</span>
                  </div>
                  <span style={{fontWeight: "bold"}}>
                    {region.countries.length}
                  </span>
                </div>
                <div
                  style={{
                    width: "100%",
                    height: "8px",
                    background: "rgba(51, 65, 85, 0.5)",
                    borderRadius: "4px",
                    overflow: "hidden",
                  }}>
                  <div
                    className="stat-bar"
                    style={{
                      width: `${
                        (region.countries.length / totalCountries) * 100
                      }%`,
                      background: region.color,
                    }}></div>
                </div>
              </div>
            ))}
          </div>
        );
      }

function App() {
        const totalCountries = regions.reduce(
          (acc, r) => acc + r.countries.length,
          0
        );
        const [selectedRegion, setSelectedRegion] = useState(null);

const filteredRegions = selectedRegion
          ? regions.filter((r) => r.name === selectedRegion)
          : regions;

return (
          <div style={{minHeight: "100vh"}}>
            <header
              style={{
                borderBottom: "1px solid rgba(148, 163, 184, 0.2)",
                backdropFilter: "blur(12px)",
                background: "rgba(2, 6, 23, 0.3)",
              }}>
              <div className="container" style={{padding: "1.5rem"}}>
                <div
                  style={{
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between",
                    flexWrap: "wrap",
                    gap: "1rem",
                  }}>
                  <div>
                    <h1
                      style={{
                        fontSize: "clamp(1.5rem, 4vw, 2rem)",
                        fontWeight: "bold",
                        marginBottom: "0.25rem",
                      }}>
                      Global Network
                    </h1>
                    <p style={{fontSize: "0.875rem", color: "#94a3b8"}}>
                      Interactive visualization of {totalCountries} countries
                    </p>
                  </div>
                  <div style={{textAlign: "right"}}>
                    <div
                      style={{
                        fontSize: "2.5rem",
                        fontWeight: "bold",
                        color: "#3b82f6",
                      }}>
                      {totalCountries}
                    </div>
                    <div
                      style={{
                        fontSize: "0.75rem",
                        color: "#94a3b8",
                        textTransform: "uppercase",
                        letterSpacing: "0.05em",
                      }}>
                      Countries
                    </div>
                  </div>
                </div>
              </div>
            </header>
            <main className="container" style={{padding: "1.5rem"}}>
              <div
                className="grid-responsive"
                style={{
                  display: "grid",
                  gridTemplateColumns: "2fr 1fr",
                  gridTemplateRows: "600px auto",
                  gap: "1.5rem",
                }}>
                <div
                  className="map-section"
                  style={{gridColumn: "1", gridRow: "1"}}>
                  <div className="card" style={{height: "100%"}}>
                    <div
                      style={{
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "space-between",
                        marginBottom: "1rem",
                        flexWrap: "wrap",
                        gap: "0.5rem",
                      }}>
                      <h2 style={{fontSize: "1.25rem", fontWeight: "bold"}}>
                        World Map
                      </h2>
                      <div style={{fontSize: "0.875rem", color: "#94a3b8"}}>
                        Hover over countries to see details
                      </div>
                    </div>
                    <div style={{height: "calc(100% - 60px)"}}>
                      <InteractiveWorldMap selectedRegion={selectedRegion} />
                    </div>
                  </div>
                </div>

<div
                  className="countries-section"
                  style={{gridColumn: "1", gridRow: "2"}}>
                  <div className="card">
                    <h2
                      style={{
                        fontSize: "1.25rem",
                        fontWeight: "bold",
                        marginBottom: "1.5rem",
                      }}>
                      {selectedRegion
                        ? `${selectedRegion} Countries`
                        : "All Countries"}
                    </h2>
                    <div
                      style={{
                        display: "grid",
                        gridTemplateColumns:
                          "repeat(auto-fill, minmax(150px, 1fr))",
                        gap: "0.75rem",
                      }}>
                      {filteredRegions.flatMap((region) =>
                        region.countries.map((country) => (
                          <div key={country.code} className="country-card">
                            <div
                              style={{
                                display: "flex",
                                alignItems: "center",
                                gap: "0.5rem",
                                marginBottom: "0.5rem",
                              }}>
                              <div
                                style={{
                                  width: "8px",
                                  height: "8px",
                                  borderRadius: "50%",
                                  background: region.color,
                                }}></div>
                              <div
                                style={{
                                  fontWeight: "600",
                                  fontSize: "0.875rem",
                                }}>
                                {country.name}
                              </div>
                            </div>
                            <div
                              style={{fontSize: "0.75rem", color: "#94a3b8"}}>
                              {country.coordinates[0].toFixed(1)}°,{" "}
                              {country.coordinates[1].toFixed(1)}°
                            </div>
                          </div>
                        ))
                      )}
                    </div>
                  </div>
                </div>

<div
                  className="sidebar-section"
                  style={{gridColumn: "2", gridRow: "1 / span 2"}}>
                  <div
                    style={{
                      display: "flex",
                      flexDirection: "column",
                      gap: "1.5rem",
                    }}>
                    <div className="card">
                      <h3
                        style={{
                          fontSize: "1.125rem",
                          fontWeight: "bold",
                          marginBottom: "1rem",
                        }}>
                        Regions
                      </h3>
                      <RegionButtons
                        selectedRegion={selectedRegion}
                        setSelectedRegion={setSelectedRegion}
                      />
                    </div>

<div className="card">
                      <h3
                        style={{
                          fontSize: "1.125rem",
                          fontWeight: "bold",
                          marginBottom: "1rem",
                        }}>
                        Statistics
                      </h3>
                      <Statistics
                        regions={regions}
                        totalCountries={totalCountries}
                      />
                    </div>
                  </div>
                </div>

<div className="middle-row">
                  <div className="card">
                    <h3
                      style={{
                        fontSize: "1.125rem",
                        fontWeight: "bold",
                        marginBottom: "1rem",
                      }}>
                      Regions
                    </h3>
                    <RegionButtons
                      selectedRegion={selectedRegion}
                      setSelectedRegion={setSelectedRegion}
                    />
                  </div>

<div className="card">
                    <h3
                      style={{
                        fontSize: "1.125rem",
                        fontWeight: "bold",
                        marginBottom: "1rem",
                      }}>
                      Statistics
                    </h3>
                    <Statistics
                      regions={regions}
                      totalCountries={totalCountries}
                    />
                  </div>
                </div>

<div className="regions-mobile">
                  <div className="card">
                    <h3
                      style={{
                        fontSize: "1.125rem",
                        fontWeight: "bold",
                        marginBottom: "1rem",
                      }}>
                      Regions
                    </h3>
                    <RegionButtons
                      selectedRegion={selectedRegion}
                      setSelectedRegion={setSelectedRegion}
                    />
                  </div>
                </div>

<div className="statistics-mobile">
                  <div className="card">
                    <h3
                      style={{
                        fontSize: "1.125rem",
                        fontWeight: "bold",
                        marginBottom: "1rem",
                      }}>
                      Statistics
                    </h3>
                    <Statistics
                      regions={regions}
                      totalCountries={totalCountries}
                    />
                  </div>
                </div>
              </div>
            </main>
          </div>
        );
      }

ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>
</html>

CSS