60 lines
3.1 KiB
TypeScript
60 lines
3.1 KiB
TypeScript
import { Cloud, Droplets, Gauge, ThermometerSun, Wind } from "lucide-react";
|
|
import { useWeatherStore } from "@/store/weatherStore";
|
|
|
|
interface WeatherDetailsGridProps {
|
|
icon: React.ReactNode;
|
|
label: string;
|
|
value: string;
|
|
subtitle?: string;
|
|
}
|
|
|
|
function WeatherInfoItem({ icon, label, value, subtitle }: WeatherDetailsGridProps) {
|
|
return(
|
|
<div className="group rounded-xl bg-slate-50/50 border border-slate-200 p-4 hover:bg-slate-100/80 hover:border-slate-300 transition-all duration-300">
|
|
<div className="flex items-start gap-2">
|
|
<div className="flex-shrink-0 w-9 h-9 rounded-full bg-white flex items-center justify-center group-hover:scale-100 transition-tramsform duration-300">
|
|
{icon}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm text-slate-500">{label}</p>
|
|
<p className="text-slate-900 text-sm font-semibold">{value}</p>
|
|
{subtitle && <p className="text-xs text-slate-400 mt-1">{subtitle}</p>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function WeatherDetailsGrid(){
|
|
const {currentWeather} = useWeatherStore();
|
|
if(!currentWeather) return null;
|
|
return(
|
|
<div>
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-3 mb-4">
|
|
<WeatherInfoItem icon={<Droplets className="w-4 h-4 text-blue-500"/>} label="湿度" value={`${currentWeather.current.humidity}%`} />
|
|
<WeatherInfoItem icon={<Wind className="w-4 h-4 text-blue-500"/>} label="风速" value={`${currentWeather.current.wind_speed} m/s`} />
|
|
<WeatherInfoItem icon={<Gauge className="w-4 h-4 text-blue-500"/>} label="气压" value={`${currentWeather.current.pressure} hPa`} />
|
|
<WeatherInfoItem icon={<Cloud className="w-4 h-4 text-blue-500"/>} label="云量" value={`${currentWeather.current.cloudcover}%`} />
|
|
<WeatherInfoItem icon={<ThermometerSun className="w-4 h-4 text-blue-500"/>} label="紫外线" value={`${currentWeather.current.uv_index} UV`} />
|
|
</div>
|
|
<div className="pt-4 border-t border-slate-200">
|
|
<div className="flex items-center justify-between text-sm mb-2">
|
|
<div className="flex items-center gap-2 text-slate-600">
|
|
<Droplets className="w-4 h-4 text-blue-500"/>
|
|
<span>降水量:\
|
|
<span className="font-semibold">
|
|
{currentWeather.current.precip} mm
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<span className=" text-slate-600">
|
|
{currentWeather.current.is_day === "yes" ? "白天" : "夜晚"}
|
|
</span>
|
|
</div>
|
|
<p className="text-xs text-center text-slate-500">
|
|
观测时间: {currentWeather.current.observation_time}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |