global

src/components/City/City.js

@@ -1,9 +1,148 @@
-const City = () => {
-    return ( 
-        <div>
-            <input />
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+
+const City = (props) => {
+  const route = props.getValue;
+
+  const [cityOptions, setCityOptions] = useState([]);
+  const [filteredCityOptions, setFilteredCityOptions] = useState([]);
+  const [selectedCity, setSelectedCity] = useState('');
+  const [buttonsVisible, setButtonsVisible] = useState(false);
+
+  const cityHandler = (e) => {
+    setSelectedCity(e.target.value);
+  };
+
+  const options = {
+    method: 'GET',
+    url: 'https://easytravel.zetcraft.ru/v1/GetAllCity',
+  };
+
+  useEffect(() => {
+    axios.request(options)
+      .then(function (response) {
+        console.log(response.data);
+        setCityOptions(response.data);
+        setFilteredCityOptions(response.data);
+      })
+      .catch(function (error) {
+        console.error(error);
+      });
+  }, []);
+
+  useEffect(() => {
+    const filteredOptions = cityOptions.filter(option =>
+      option.name.toLowerCase().includes(selectedCity.toLowerCase())
+    );
+    setFilteredCityOptions(filteredOptions);
+  
+    setTimeout(() => {
+      setButtonsVisible(selectedCity !== '');
+    }, 300);
+  }, [selectedCity, cityOptions]);
+
+  useEffect(() => {
+    const filteredOptions = cityOptions.filter(option =>
+      option.name.toLowerCase().includes(selectedCity.toLowerCase())
+    );
+    setFilteredCityOptions(filteredOptions);
+  }, [selectedCity, cityOptions]);
+
+  return (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100vh',
+      justifyContent: 'space-around',
+      alignItems: 'center',
+      background: 'linear-gradient(180deg, #7EAFE7 0.27%, rgba(41, 134, 242, 0.38) 27.08%, rgba(41, 134, 242, 0.35) 31.77%, rgba(152, 198, 253, 0.28) 46.35%, rgba(41, 134, 242, 0.00) 100%)',
+    }}>
+      <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        gap: 50,
+      }}>
+        <div style={{
+          display: 'flex',
+          width: 304,
+        }}>
+          <img src="./image 2.png" alt="#" style={{
+            width: 282,
+            height: 282,
+          }} />
         </div>
-     );
+
+        <select onChange={e => cityHandler(e)} value={selectedCity} id="city" name="city" style={{
+          height: 40,
+          width: 304,
+          borderRadius: '20px',
+          padding: '5px',
+        }}>
+          <option value="" style={{
+                maxWidth: 200,
+            }}>Select a city</option>
+          {filteredCityOptions.map(option => (
+            <option key={option.id} value={option.name} style={{
+                maxWidth: 200,
+            }}>{option.name}</option>
+          ))}
+        </select>
+      </div>
+      {buttonsVisible ? (
+  <div className="button-container" style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 10,
+    }}>
+    <button
+      onClick={() => route('/second')}
+      className="animated-button"
+      style={{
+        width: 304,
+        height: 54,
+        borderRadius: 27,
+        border: 'none',
+        backgroundColor: '#46A2E3',
+        fontFamily: 'Raleway',
+        color: '#FFFFFF',
+        fontWeight: '97px',
+      }}
+    >
+      Я в этом городе
+    </button>
+    <button
+      onClick={() => window.location.href = ''}
+      className="animated-button"
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: 304,
+        height: 42,
+        borderRadius: 27,
+        border: 'none',
+        backgroundColor: '#fff',
+        fontFamily: 'Raleway',
+        color: '#0C78FE',
+        fontWeight: '97px',
+      }}
+    >
+      <img
+        src="./icon200.png"
+        alt="#"
+        style={{
+          width: 30,
+          height: 30,
+          marginRight: 10,
+        }}
+      />
+      Купить билет
+    </button>
+  </div>
+) : null}
+    </div>
+  );
 }
- 
-export default City;
+
+export default City;