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

Updates to theme editor and weather icon

Browse Source
This commit is contained in:
Sean Edmunds
2025-08-22 16:10:31 -05:00
parent 28f7b5d017
commit 03e69124c2
3 changed files with 73 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,5 @@
import { Image } from '@mantine/core';
import { Group, Image } from '@mantine/core';
import { FaArrowRight } from 'react-icons/fa';
import CloudyIcon from '../../assets/weather/cloudy.svg';
import HazeIcon from '../../assets/weather/haze.svg';
import HeavyRainIcon from '../../assets/weather/heavy-rain.svg';
@@ -18,8 +19,11 @@ export default function WeatherIcon({
textDescription: string;
}) {
const icon = textDescription.includes('then')
? textDescription.substring(0, textDescription.trim().indexOf('then'))
: textDescription;
? [
textDescription.substring(0, textDescription.trim().indexOf('then')),
textDescription.substring(textDescription.trim().indexOf('then') + 4).trim(),
]
: [textDescription.trim()];
const lookupSource = (icon: any) => {
switch (icon.trim()) {
@@ -178,14 +182,61 @@ export default function WeatherIcon({
};
return (
<Image
style={
size === 'lg'
? { width: '150px', height: '150px' }
: { width: '75px', height: '75px' }
}
src={lookupSource(icon).src}
alt={lookupSource(icon).alt}
/>
<>
{icon.length === 1 ? (
<Image
style={
size === 'lg'
? { width: '150px', height: '150px' }
: { width: '75px', height: '75px' }
}
src={lookupSource(icon[0]).src}
alt={lookupSource(icon[0]).alt}
/>
) : (
<Group
pos={'relative'}
style={
size === 'lg'
? { width: '150px', height: '150px' }
: { width: '75px', height: '75px' }
}
align='center'
justify='center'
>
<Image
style={{
mask: 'linear-gradient(105deg, rgba(0, 0, 0, 1) 52%, rgba(0, 0, 0, 0) 56%)',
}}
pos={'absolute'}
left={-8}
src={lookupSource(icon[0]).src}
alt={lookupSource(icon[0]).alt}
/>
<Image
style={{
mask: 'linear-gradient(105deg, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, 1) 48%)',
}}
pos={'absolute'}
right={-8}
src={lookupSource(icon[1]).src}
alt={lookupSource(icon[1]).alt}
/>
<FaArrowRight
size={28}
style={{
color: 'var(--mantine-color-background-0)',
position: 'absolute',
stroke: 'var(--mantine-color-primary-0)',
strokeWidth: 16,
backgroundColor:
'color-mix(in srgb, var(--mantine-color-accent-0), transparent 20%)',
borderRadius: '50%',
padding: '5px',
}}
/>
</Group>
)}
</>
);
}