80 lines
3.2 KiB
TypeScript
80 lines
3.2 KiB
TypeScript
import { Droplets,Wind,Gauge,Cloud,Eye,ThermometerSun} from "lucide-react";
|
||
import React from "react";
|
||
import { getWindDirection } from "@/components/lib/utils";
|
||
import {useWeatherStore} from "@/store/weatherStore";
|
||
|
||
interface WeatherInfoItemProps {
|
||
icon: React.ReactNode;
|
||
label: string;
|
||
value: string;
|
||
subtitle?: string;
|
||
}
|
||
|
||
export function WeatherInfoItem({ icon, label, value, subtitle }: WeatherInfoItemProps) {
|
||
|
||
return (
|
||
<div className="group rounded-xl bg-slate-50/50 border border-slate-200/50 p-3 hover:bg-slate-100/50 hover:border-slate-300 transition duration-200 ">
|
||
<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-transform duration-200">{icon}</div>
|
||
<div className="flex-1 min-w-0">
|
||
<p className="text-xs text-slate-500">{label}</p>
|
||
<p className="text-sm font-semibold text-slate-900">{value}</p>
|
||
{subtitle && <p className="text-xs text-slate-500">{subtitle}</p>}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
);
|
||
}
|
||
|
||
export function WeatherDetailsGrid() {
|
||
|
||
const {currentWeather} = useWeatherStore();
|
||
if (!currentWeather) return null;
|
||
<>
|
||
<div className="grid grids-cols-2 md:grids-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-green-500"/>}
|
||
label="风速"
|
||
value={'${currentWeather.current.wind_speed}%'}
|
||
subtitle={getWindDirection(currentWeather.current.wind_dir)}/>
|
||
|
||
<WeatherInfoItem
|
||
icon={<Gauge className="w-4 h-4 text-purple-500"/>}
|
||
label="气压"
|
||
value={'${currentWeather.current.humidity}%'}/>
|
||
|
||
|
||
<WeatherInfoItem
|
||
icon={<Cloud className="w-4 h-4 text-gray-500"/>}
|
||
label="云量"
|
||
value={'${currentWeather.current.cloudcover}%'}/>
|
||
|
||
|
||
<WeatherInfoItem
|
||
icon={<ThermometerSun className="w-4 h-4 text-orange-500"/>}
|
||
label="紫外线"
|
||
value={'${currentWeather.current.uv_index}%'}/>
|
||
|
||
</div>
|
||
|
||
<div className="pt-4 border-t border-slate-200">
|
||
<div className="flex items-center justify-center 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-xs text-center text-slate-500">{currentWeather.current.is_day==="yes"?'白天':'夜晚'}</span>
|
||
</div>
|
||
<p>观测时间：{currentWeather.current.observation_time}</p>
|
||
</div>
|
||
|
||
|
||
</>
|
||
} |