test

  return (
    <img
      src={search_icon}
      alt=""
      onClick={() => search(inputRef.current.value)}
    />
  );



  const MyComponent = () => {
    const inputRef = useRef();
  
    const search = (value) => {
      if(city === ""){
          alert("Please Enter A Valid City.")
          return;
      }
      try {
          const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=imperial&appid=${import.meta.env.VITE_APP_ID}`;
  
          const response =  fetch(url);
          const data =  response.json();
          console.log(data);
          const icon = allIcons[data.weather[0].icon] || clear_icon
          setWeatherData ({
              humidity: data.main.humidity,
              windSpeed: data.wind.speed,
              temperature: Math.floor(data.main.temp),
              location: data.name,
              icon: icon
          })
  
  
      } catch (error) {
          console.log(error)
      }
  }
    };
    useEffect(()=>{
        search("London");
    }, [])
return (
<div className='weather'>
    <div className="search-bar">
    <input ref={inputRef} type="text" placeholder='Search' />
  
return (
<img
  src={search_icon}
  alt=""
  onClick={() => search(inputRef.current.value)}
/>
);
</div>
<img src={clear_icon} alt="" className='weather_icon' />
<p className='temperature'>{weatherData.temperature} °F</p>
<p className='location'>{weatherData.location}</p>
<div className="weather-data">
    <div className="col">
        <img src={humidity_icon} alt="" />
        <div>
            <p>{weatherData.humidity} %</p>
            <span>Humidity</span>
        </div>
    </div>
    <div className="col">
        <img src={wind_icon} alt="" />
        <div>
            <p>{weatherData.windSpeed} MPH</p>
            <span>Wind Speed</span>
        </div>
    </div>
</div>
</div>
)
// }


// Test number 3

// const MyComponent = () => {
//     const inputRef = useRef();
  
//     const search = (value) => {
     
//     };