86 lines
3.1 KiB
TypeScript
86 lines
3.1 KiB
TypeScript
import React from "react";
|
|
import sunriseIcon from "../assets/icons/sunrise-fill.svg";
|
|
import sunsetIcon from "../assets/icons/sunset-fill.svg";
|
|
|
|
const WeatherData: React.FC = () => {
|
|
const weatherRaw = localStorage.getItem("weather");
|
|
const weatherData = JSON.parse(weatherRaw || "{}");
|
|
|
|
// OpenWeatherMap Icon-URL
|
|
const iconCode = weatherData?.weather?.[0]?.icon;
|
|
const iconUrl = iconCode
|
|
? `https://openweathermap.org/img/wn/${iconCode}@4x.png`
|
|
: "";
|
|
|
|
return (
|
|
<div className="flex justify-center items-center min-h-[60vh]">
|
|
<div className="bg-white/90 p-10 rounded-2xl shadow-2xl min-w-[320px] text-center border-2 border-blue-200">
|
|
<h2 className="text-3xl font-bold mb-2 text-blue-700 flex items-center justify-center gap-2">
|
|
{weatherData?.name}
|
|
</h2>
|
|
<p className="text-5xl font-extrabold mb-2 text-blue-900">
|
|
{weatherData?.main?.temp}{" "}
|
|
{localStorage.getItem("unit") === "metric"
|
|
? "°C"
|
|
: localStorage.getItem("unit") === "imperial"
|
|
? "°F"
|
|
: localStorage.getItem("unit") === "standard"
|
|
? "K"
|
|
: "°C"}
|
|
</p>
|
|
<p className="flex items-center justify-center gap-2">
|
|
{weatherData?.sys?.country && (
|
|
<>
|
|
<img
|
|
src={`https://flagcdn.com/${weatherData.sys.country.toLowerCase()}.svg`}
|
|
alt={weatherData.sys.country}
|
|
width={24}
|
|
height={18}
|
|
/>
|
|
<span>{weatherData.sys.country}</span>
|
|
</>
|
|
)}
|
|
</p>
|
|
<p className="text-lg mb-4 capitalize text-blue-600">
|
|
{weatherData?.weather?.[0]?.description}
|
|
</p>
|
|
{iconUrl && (
|
|
<img
|
|
src={iconUrl}
|
|
alt={weatherData?.weather?.[0]?.description}
|
|
className="mx-auto mb-4 w-32 h-32 drop-shadow-lg"
|
|
/>
|
|
)}
|
|
<div className="flex flex-col items-center gap-4 mb-2">
|
|
<div className="flex items-center gap-3">
|
|
<img src={sunriseIcon} alt="Sunrise Icon" className="w-7 h-7" />
|
|
<span className="text-base text-blue-700 font-semibold">
|
|
Sunrise:{" "}
|
|
{weatherData?.sys?.sunrise
|
|
? new Date(weatherData.sys.sunrise * 1000).toLocaleTimeString(
|
|
"de-DE",
|
|
{ hour: "2-digit", minute: "2-digit" }
|
|
)
|
|
: "--:--"}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<img src={sunsetIcon} alt="Sunset Icon" className="w-7 h-7" />
|
|
<span className="text-base text-blue-700 font-semibold">
|
|
Sunset:{" "}
|
|
{weatherData?.sys?.sunset
|
|
? new Date(weatherData.sys.sunset * 1000).toLocaleTimeString(
|
|
"de-DE",
|
|
{ hour: "2-digit", minute: "2-digit" }
|
|
)
|
|
: "--:--"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default WeatherData;
|