smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

New Weather Modal

Browse Source
This commit is contained in:
Sean Edmunds
2025-02-10 17:06:00 -06:00
parent 1d1b707d0c
commit a4b1e55968
21 changed files with 972 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
src/components/WeatherModal/WeatherIcon.tsx Normal file
View File

@@ -0,0 +1,251 @@
import { Image } from '@mantine/core';
import CloudyIcon from '../../assets/weather/cloudy.svg';
import HazeIcon from '../../assets/weather/haze.svg';
import HeavyRainIcon from '../../assets/weather/heavy-rain.svg';
import PartlyCloudyIcon from '../../assets/weather/partly-cloudy.svg';
import RainIcon from '../../assets/weather/rain.svg';
import SleetIcon from '../../assets/weather/sleet.svg';
import SnowIcon from '../../assets/weather/snow.svg';
import SunnyIcon from '../../assets/weather/sunny.svg';
import ThunderstormIcon from '../../assets/weather/thunderstorm.svg';
export default function WeatherIcon({ textDescription }: { textDescription: string }) {
const Icon = () => {
switch (textDescription.trim()) {
case 'Clear':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={SunnyIcon}
alt='SunnyIcon'
/>
);
case 'Cloudy':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={CloudyIcon}
alt='CloudyIcon'
/>
);
case 'Mostly Cloudy':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={CloudyIcon}
alt='CloudyIcon'
/>
);
case 'Rain':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={RainIcon}
alt='RainIcon'
/>
);
case 'Showers':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={RainIcon}
alt='RainIcon'
/>
);
case 'Drizzle':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={RainIcon}
alt='RainIcon'
/>
);
case 'Snow':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={SnowIcon}
alt='SnowIcon'
/>
);
case 'Thunderstorm':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={ThunderstormIcon}
alt='ThunderstormIcon'
/>
);
case 'Mist':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Haze':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Dust':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Fog':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Smoke':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Sand':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Ash':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Squall':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Tornado':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Freezing Rain':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Shower Rain':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Heavy Rain':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={HeavyRainIcon}
alt='HeavyRainIcon'
/>
);
case 'Scattered Clouds':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={PartlyCloudyIcon}
alt='PartlyCloudyIcon'
/>
);
case 'Broken Clouds':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={PartlyCloudyIcon}
alt='PartlyCloudyIcon'
/>
);
case 'Overcast Clouds':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={PartlyCloudyIcon}
alt='PartlyCloudyIcon'
/>
);
case 'Moderate Rain':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={PartlyCloudyIcon}
alt='PartlyCloudyIcon'
/>
);
case 'Light Rain':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={PartlyCloudyIcon}
alt='PartlyCloudyIcon'
/>
);
case 'Heavy Snow':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={SnowIcon}
alt='SnowIcon'
/>
);
case 'Sleet':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={SleetIcon}
alt='SleetIcon'
/>
);
case 'Partly Sunny':
return (
<Image
style={{ width: '100px', height: '100px' }}
src={PartlyCloudyIcon}
alt='PartlyCloudyIcon'
/>
);
default:
return (
<Image
style={{ width: '100px', height: '100px' }}
src={SunnyIcon}
alt='SunnyIcon'
/>
);
}
};
return <Icon />;
}