test/1114/app/components/weather/WeatherDetailsGrid.tsx

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>
    
    
    </>
}