local-weather/components/WeatherHero.tsx

import Image from "next/image";

import { useContext } from "react";
import { WeatherContext } from "./WeatherNow";
import { weatherIcons } from "@/app/weatherIcons";

export default function WeatherHero() {
  const { weather } = useContext(WeatherContext);
  const weatherCode = weather.current.weather_code;
  const currentWeather = weatherIcons.filter((weather) => {
    return weather.code === weatherCode;
  });
  return (
    <>
      <Image
        className="h-44 w-auto mx-auto"
        src={currentWeather[0].url}
        alt="Weather icon"
      />
    </>
  );
}