90 lines
4.1 KiB
TypeScript
90 lines
4.1 KiB
TypeScript
|
|
import React from 'react';
|
|
import {
|
|
Cloud,
|
|
CloudDrizzle,
|
|
CloudFog,
|
|
CloudLightning, CloudMoon,
|
|
CloudRain,
|
|
CloudSnow,
|
|
CloudSun,
|
|
MapPin, Moon, Sun,
|
|
ThermometerSun
|
|
} from 'lucide-react';
|
|
|
|
import { formatTemperature } from "@/lib/utils";
|
|
import { useWeatherStore } from '@/store/weatherStore';
|
|
interface WeatherIconProps {
|
|
description: string;
|
|
isDay: string;
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* Returns the appropriate weather icon based on description and time of day
|
|
*/
|
|
function WeatherIcon({ description, isDay, className = "w-16 h-16 md:w-20 md:h-20" }: WeatherIconProps) {
|
|
const desc = description.toLowerCase();
|
|
const isDaytime = isDay === 'yes';
|
|
|
|
if (desc.includes('rain') || desc.includes('雨')) {
|
|
return desc.includes('heavy') || desc.includes('暴')
|
|
? <CloudRain className={className} />
|
|
: <CloudDrizzle className={className} />;
|
|
}
|
|
if (desc.includes('snow') || desc.includes('雪')) return <CloudSnow className={className} />;
|
|
if (desc.includes('thunder') || desc.includes('storm') || desc.includes('雷')) return <CloudLightning className={className} />;
|
|
if (desc.includes('fog') || desc.includes('mist') || desc.includes('haze') || desc.includes('雾') || desc.includes('霾')) return <CloudFog className={className} />;
|
|
if (desc.includes('partly') || desc.includes('scattered') || desc.includes('多云')) {
|
|
return isDaytime ? <CloudSun className={className} /> : <CloudMoon className={className} />;
|
|
}
|
|
if (desc.includes('cloudy') || desc.includes('overcast') || desc.includes('阴')) return <Cloud className={className} />;
|
|
if (desc.includes('clear') || desc.includes('sunny') || desc.includes('晴')) {
|
|
return isDaytime ? <Sun className={className} /> : <Moon className={className} />;
|
|
}
|
|
return isDaytime ? <Sun className={className} /> : <Moon className={className} />;
|
|
}
|
|
|
|
export function WeatherDisplay(){
|
|
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">
|
|
<ThermometerSun className="w-4 h-4"/>
|
|
<span>体感{formatTemperature(currentWeather.current.feelslike)}°C</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |