Mapa-múndi interativo com React e D3.js

1709 fance

Abrir no Editor Publique Seu Código

Recomendado

11 September 2025

Modelo de site HTML da Starbucks

10 June 2025

Um Código por alejandrokundrah

18 June 2025

API para desenvolvedores: construir e integrar | DevFlow

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>

Recomendado

Modelo de site HTML da Starbucks

Um Código por alejandrokundrah

API para desenvolvedores: construir e integrar | DevFlow

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS