first commit

2023-02-06 17:10:05 +05:00
commit 08d06a9c71
58 changed files with 32605 additions and 0 deletions
@@ -0,0 +1,81 @@
+import "./MapComponent.css";
+import { borders, federalCities, regions } from "../../utils/array";
+import { Region } from "../Region/Region";
+import { FederalCity } from "../FederalCIty/FederalCity";
+import { useEffect, useState } from "react";
+
+export const MapComponent = ({
+  selectedValue,
+  handleSelect,
+  open,
+  setOpen,
+}) => {
+  const [select, setSelect] = useState(selectedValue.id);
+  const [display, setDisplay] = useState(selectedValue.name);
+
+  useEffect(() => {
+    setSelect(selectedValue.id);
+    setDisplay(selectedValue.name);
+  }, [handleSelect]);
+
+  return (
+    <div className="map-container">
+      {open && (
+        <div className="region-name-block">
+          <div className="region-selected">
+            {display && (
+              <>
+                {" "}
+                <div className="region-pointer"></div>
+                <span className="region-name">{display}</span>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+      <svg
+        viewBox="0 0 1064 555"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clipPath="url(#clip0_2181_13226)">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d={borders.d}
+            fill={borders.fill}
+          ></path>
+          {regions.map((i) => (
+            <Region
+              handleSelect={handleSelect}
+              select={select}
+              key={i.id}
+              element={i}
+              d={i.d}
+            ></Region>
+          ))}
+        </g>
+        <defs>
+          <clipPath id="clip0_2181_13226">
+            <rect width="1063.48" height="554.495" fill="white" />
+          </clipPath>
+          <circle cx="7" cy="7" r="6.5" id="crc1" />
+        </defs>
+        {federalCities.map((item) => (<FederalCity select={select} handleSelect={handleSelect}  key={item.id} item={item}></FederalCity>))}
+      </svg>
+      {open && (
+        <div className="button-block">
+          <button onClick={() => setOpen(false)} className="button button-back">
+            Назад
+          </button>
+          <button
+            onClick={() => setOpen(false)}
+            className="button-confirm button"
+          >
+            Продолжить
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};