रिएक्ट और D3.js के साथ इंटरैक्टिव विश्व मानचित्र

612 fance

संपादक में खोलें अपना कोड प्रकाशित करें

रिएक्ट और D3.js के साथ इंटरैक्टिव विश्व मानचित्र

अनुशंसित

12 August 2025

मैट्रिक्स पृष्ठभूमि के साथ HTML लॉगिन फ़ॉर्म

19 May 2025

लक्जरी स्मार्टवॉचें सुंदरता और प्रौद्योगिकी को पुनर्परिभाषित कर रही हैं

16 October 2025

कोड प्रभाव के साथ CSS एनिमेटेड लोडिंग स्क्रीन

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>

अनुशंसित

मैट्रिक्स पृष्ठभूमि के साथ HTML लॉगिन फ़ॉर्म

लक्जरी स्मार्टवॉचें सुंदरता और प्रौद्योगिकी को पुनर्परिभाषित कर रही हैं

कोड प्रभाव के साथ CSS एनिमेटेड लोडिंग स्क्रीन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS