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

Updated weather icons

Browse Source
This commit is contained in:
Sean Edmunds
2025-04-01 14:32:54 -05:00
parent c36ca07893
commit 329a9bbc98
2 changed files with 143 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/WeatherModal/CurrentWeather.tsx
View File

@@ -86,7 +86,7 @@ export default function CurrentWeather({ current }: any) {
marginLeft: 16,
}}
>
{current.textDescription}
{current.temperature === 69 ? 'Nice' : current.textDescription}
</Text>
</Stack>
<Stack gap={4} w={isMobile ? '50%' : '45%'}>

286
src/components/WeatherModal/WeatherIcon.tsx
View File

@@ -8,10 +8,39 @@ 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';
import WindyIcon from '../../assets/weather/windy.svg';
export default function WeatherIcon({ textDescription }: { textDescription: string }) {
const icon = textDescription.includes('then')
? textDescription.substring(0, textDescription.trim().indexOf('then'))
: textDescription;
const Icon = () => {
switch (textDescription.trim()) {
switch (icon.trim()) {
case 'Ash':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Broken Clouds':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={PartlyCloudyIcon}
alt='PartlyCloudyIcon'
/>
);
case 'Chance Rain Showers':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={RainIcon}
alt='RainIcon'
/>
);
case 'Clear':
return (
<Image
@@ -28,28 +57,12 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
alt='CloudyIcon'
/>
);
case 'Mostly Cloudy':
case 'Dust':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={CloudyIcon}
alt='CloudyIcon'
/>
);
case 'Rain':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={RainIcon}
alt='RainIcon'
/>
);
case 'Showers':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={RainIcon}
alt='RainIcon'
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Drizzle':
@@ -60,46 +73,6 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
alt='RainIcon'
/>
);
case 'Snow':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={SnowIcon}
alt='SnowIcon'
/>
);
case 'Thunderstorm':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={ThunderstormIcon}
alt='ThunderstormIcon'
/>
);
case 'Mist':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Haze':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Dust':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Fog':
return (
<Image
@@ -108,63 +81,15 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
alt='HazeIcon'
/>
);
case 'Patchy Fog':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Smoke':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Sand':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Ash':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Squall':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Tornado':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Freezing Rain':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
src={SleetIcon}
alt='SleetIcon'
/>
);
case 'Shower Rain':
case 'Haze':
return (
<Image
style={{ width: '75px', height: '75px' }}
@@ -180,20 +105,44 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
alt='HeavyRainIcon'
/>
);
case 'Scattered Clouds':
case 'Heavy Snow':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={PartlyCloudyIcon}
alt='PartlyCloudyIcon'
src={SnowIcon}
alt='SnowIcon'
/>
);
case 'Broken Clouds':
case 'Light Rain':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={PartlyCloudyIcon}
alt='PartlyCloudyIcon'
src={RainIcon}
alt='RainIcon'
/>
);
case 'Mist':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Moderate Rain':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={RainIcon}
alt='RainIcon'
/>
);
case 'Mostly Cloudy':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={CloudyIcon}
alt='CloudyIcon'
/>
);
case 'Overcast Clouds':
@@ -204,36 +153,12 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
alt='PartlyCloudyIcon'
/>
);
case 'Moderate Rain':
case 'Patchy Fog':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={PartlyCloudyIcon}
alt='PartlyCloudyIcon'
/>
);
case 'Light Rain':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={PartlyCloudyIcon}
alt='PartlyCloudyIcon'
/>
);
case 'Heavy Snow':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={SnowIcon}
alt='SnowIcon'
/>
);
case 'Sleet':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={SleetIcon}
alt='SleetIcon'
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Partly Sunny':
@@ -244,6 +169,79 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
alt='PartlyCloudyIcon'
/>
);
case 'Rain':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={RainIcon}
alt='RainIcon'
/>
);
case 'Scattered Clouds':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={PartlyCloudyIcon}
alt='PartlyCloudyIcon'
/>
);
case 'Showers':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={RainIcon}
alt='RainIcon'
/>
);
case 'Sleet':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={SleetIcon}
alt='SleetIcon'
/>
);
case 'Smoke':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Snow':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={SnowIcon}
alt='SnowIcon'
/>
);
case 'Squall':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={WindyIcon}
alt='WindyIcon'
/>
);
case 'Thunderstorm':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={ThunderstormIcon}
alt='ThunderstormIcon'
/>
);
case 'Tornado':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={WindyIcon}
alt='WindyIcon'
/>
);
default:
return (
<Image