theis.gaedigk/weather-app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

added more design using tailwind classes

Browse Source
This commit is contained in:
theis.gaedigk
2025-07-31 17:17:17 +02:00
parent 21963eda1b
commit e3915a0ca4
5 changed files with 100 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/components/WeatherData.tsx
View File

@@ -13,24 +13,37 @@ const WeatherData: React.FC = () => {
: "";
return (
<div className="flex justify-center items-center min-h-[80vh]">
<div className="bg-white/80 p-8 rounded-xl shadow-lg min-w-[300px] text-center">
<h2 className="text-2xl font-semibold mb-2">{weatherData?.name}</h2>
<p className="text-4xl font-bold mb-2">{weatherData?.main?.temp} °C</p>
<p className="text-lg mb-4 capitalize">
<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">
<svg
className="w-7 h-7 text-blue-400"
fill="none"
stroke="currentColor"
strokeWidth="2"
viewBox="0 0 24 24"
>
<path d="M3 12a9 9 0 0118 0A9 9 0 013 12z" />
</svg>
{weatherData?.name}
</h2>
<p className="text-5xl font-extrabold mb-2 text-blue-900">
{weatherData?.main?.temp} °C
</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"
className="mx-auto mb-4 w-32 h-32 drop-shadow-lg"
/>
)}
<div className="flex flex-col items-center gap-2 mb-2">
<div className="flex items-center gap-2">
<img src={sunriseIcon} alt="Sunrise Icon" className="w-6 h-6" />
<span className="text-base">
<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(
@@ -40,9 +53,9 @@ const WeatherData: React.FC = () => {
: "--:--"}
</span>
</div>
<div className="flex items-center gap-2">
<img src={sunsetIcon} alt="Sunset Icon" className="w-6 h-6" />
<span className="text-base">
<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(