local-weather/components/WeatherIcon.tsx

import Image from "next/image";
import { weatherIcons } from "@/app/weatherIcons";

// this component takes WeatherIconPropType as props and shows the weather icon for the hour index it is given in timeIndex prop.
export default function WeatherIcon(props: { weatherCode: number }) {
  const currentWeather = weatherIcons.filter((weather) => {
    return weather.code === props.weatherCode;
  });
  return (
    <div className="h-12">
      <Image
        className="mt-2 max-h-12 mx-auto w-auto"
        src={currentWeather[0].url}
        alt="Weather icon"
        width={100}
        height={100}
      />
    </div>
  );
}