47 lines
1.9 KiB
TypeScript
47 lines
1.9 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} />;
|
|
}
|