Compare commits
2 Commits
d3cded4344
...
68e8d21a8e
| Author | SHA1 | Date |
|---|---|---|
|
|
68e8d21a8e | |
|
|
85994055ed |
|
|
@ -0,0 +1,45 @@
|
||||||
|
import { MapPin, Thermometer } from "lucide-react";
|
||||||
|
|
||||||
|
export function WeatherDisplay2(){
|
||||||
|
const {currentWeather} = useWeatherStore();
|
||||||
|
if(!currentWeather) return null;
|
||||||
|
|
||||||
|
return(
|
||||||
|
<div className="relative overflow-hidden rounded-2xl bg-gradient-to-b from-blue-500 via-cyan-500 to-blue-500 p-6 mb-4">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-white/100 to-transparent"></div>
|
||||||
|
<div className="absolute -right-8 -top-8 w-32 h-32 bg-white/20 rounded-full blur-3xl"></div>
|
||||||
|
<div className="realtive z-10 ">
|
||||||
|
<div className="flex items-start justify-between mb-6">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-3xl font-semibold text-white mb-2">{currentWeather.location.name}</h2>
|
||||||
|
<div className="text-white w-3 h-3">
|
||||||
|
<MapPin className="w-3 h-3 text-white" />
|
||||||
|
<span className="text-white text-sm">{currentWeather.location.country}</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-white ">
|
||||||
|
<WeatherIcon
|
||||||
|
description={currentWeather.current.weather_descriptions[0]}
|
||||||
|
isDay={currentWeather.current.is_day}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-baseline gap-2 mb-2">
|
||||||
|
<span className="text-6xl font-light text-white">
|
||||||
|
{formatTemperature(currentWeather.current.temperature)}
|
||||||
|
</span>
|
||||||
|
<span className="text-2xl text-white">
|
||||||
|
°C
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-lg text-white mb-2 capitalize font-medium">
|
||||||
|
{currentWeather.current.weather_descriptions[0]}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-2 text-white text-sm">
|
||||||
|
<Thermometer className="w-4 h-4"/>
|
||||||
|
<span>体感{formatTemperature(currentWeather.current.feelslike)}°C</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue