75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
import { Box, Tooltip } from '@mantine/core';
|
|
import {
|
|
Icon,
|
|
IconCloud,
|
|
IconCloudFog,
|
|
IconCloudRain,
|
|
IconCloudSnow,
|
|
IconCloudStorm,
|
|
IconQuestionMark,
|
|
IconSnowflake,
|
|
IconSun,
|
|
} from '@tabler/icons-react';
|
|
import { useTranslation } from 'next-i18next';
|
|
|
|
interface WeatherIconProps {
|
|
code: number;
|
|
size?: number;
|
|
}
|
|
|
|
/**
|
|
* Icon which should be displayed when specific code is defined
|
|
* @param code weather code from api
|
|
* @returns weather tile component
|
|
*/
|
|
export const WeatherIcon = ({ code, size=50 }: WeatherIconProps) => {
|
|
const { t } = useTranslation('modules/weather');
|
|
|
|
const { icon: Icon, name } =
|
|
weatherDefinitions.find((wd) => wd.codes.includes(code)) ?? unknownWeather;
|
|
|
|
return (
|
|
<Tooltip withinPortal withArrow label={t(`card.weatherDescriptions.${name}`)}>
|
|
<Box>
|
|
<Icon style={{ float: 'left' }} size={size} />
|
|
</Box>
|
|
</Tooltip>
|
|
);
|
|
};
|
|
|
|
type WeatherDefinitionType = { icon: Icon; name: string; codes: number[] };
|
|
|
|
// 0 Clear sky
|
|
// 1, 2, 3 Mainly clear, partly cloudy, and overcast
|
|
// 45, 48 Fog and depositing rime fog
|
|
// 51, 53, 55 Drizzle: Light, moderate, and dense intensity
|
|
// 56, 57 Freezing Drizzle: Light and dense intensity
|
|
// 61, 63, 65 Rain: Slight, moderate and heavy intensity
|
|
// 66, 67 Freezing Rain: Light and heavy intensity
|
|
// 71, 73, 75 Snow fall: Slight, moderate, and heavy intensity
|
|
// 77 Snow grains
|
|
// 80, 81, 82 Rain showers: Slight, moderate, and violent
|
|
// 85, 86Snow showers slight and heavy
|
|
// 95 *Thunderstorm: Slight or moderate
|
|
// 96, 99 *Thunderstorm with slight and heavy hail
|
|
const weatherDefinitions: WeatherDefinitionType[] = [
|
|
{ icon: IconSun, name: 'clear', codes: [0] },
|
|
{ icon: IconCloud, name: 'mainlyClear', codes: [1, 2, 3] },
|
|
{ icon: IconCloudFog, name: 'fog', codes: [45, 48] },
|
|
{ icon: IconCloud, name: 'drizzle', codes: [51, 53, 55] },
|
|
{ icon: IconSnowflake, name: 'freezingDrizzle', codes: [56, 57] },
|
|
{ icon: IconCloudRain, name: 'rain', codes: [61, 63, 65] },
|
|
{ icon: IconCloudRain, name: 'freezingRain', codes: [66, 67] },
|
|
{ icon: IconCloudSnow, name: 'snowFall', codes: [71, 73, 75] },
|
|
{ icon: IconCloudSnow, name: 'snowGrains', codes: [77] },
|
|
{ icon: IconCloudRain, name: 'rainShowers', codes: [80, 81, 82] },
|
|
{ icon: IconCloudSnow, name: 'snowShowers', codes: [85, 86] },
|
|
{ icon: IconCloudStorm, name: 'thunderstorm', codes: [95] },
|
|
{ icon: IconCloudStorm, name: 'thunderstormWithHail', codes: [96, 99] },
|
|
];
|
|
|
|
const unknownWeather: Omit<WeatherDefinitionType, 'codes'> = {
|
|
icon: IconQuestionMark,
|
|
name: 'unknown',
|
|
};
|