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

Updates to weather modal
All checks were successful
Deploy to production / build (push) Successful in 11s
Details

Browse Source
This commit is contained in:
Sean Edmunds
2026-07-14 16:30:41 -05:00
parent 8bc8680152
commit 78d887de9a
7 changed files with 362 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

244
src/components/WeatherModal/ExtendedForecastDetails.tsx Normal file
View File

@@ -0,0 +1,244 @@
import { Box, Card, Group, Stack, Text } from '@mantine/core';
import { FaArrowDown, FaArrowUp, FaLocationArrow, FaSun, FaWind } from 'react-icons/fa';
import { WiRain, WiSunrise, WiSunset } from 'react-icons/wi';
import { WeatherCodes } from 'types';
import WeatherFeaturePill from './WeatherFeaturePill';
import WeatherIcon from './WeatherIcon';
export default function ExtendedForecastDetails({ selectedDay }: { selectedDay: any }) {
return (
<Card
h={'100%'}
w={'100%'}
style={{
color: 'var(--mantine-color-primary-0)',
backgroundColor: 'var(--mantine-color-background-0)',
padding: '1rem',
borderRadius: '8px',
}}
onClick={(e) => {
e.stopPropagation();
}}
shadow='xl'
p={0}
>
<Group
w={'100%'}
justify='center'
bg={'var(--mantine-color-search-0)'}
p={0}
mt={0}
>
<Text fz={'1.5rem'}>
{selectedDay.time.toLocaleDateString('en-US', { weekday: 'long' })}
</Text>
<Text fz={'1.5rem'}>{selectedDay.time.toLocaleDateString()}</Text>
</Group>
<Stack align='center' p={16}>
<WeatherIcon size={'xl'} code={selectedDay.weatherCode} />
<Text fz={'1rem'} fw={600} mt={'-32px'}>
{WeatherCodes[Number(selectedDay.weatherCode)]}
</Text>
<Group>
<Group justify='space-between'>
<Stack gap={4}>
<WeatherFeaturePill
leftSide={
<Group gap={2}>
<FaWind size={16} />
<Text>Wind</Text>
</Group>
}
rightSide={<Text>{selectedDay.windSpeed?.toFixed(0)}mph</Text>}
highlight='right'
/>
<WeatherFeaturePill
leftSide={
<Group gap={2}>
<FaWind size={16} />
<Text>Gusts</Text>
</Group>
}
rightSide={<Text>{selectedDay.windGusts?.toFixed(0)}mph</Text>}
highlight='right'
/>
</Stack>
<Stack align='center' gap={0}>
<Box
style={{
border: '2px solid var(--mantine-color-primary-0)',
borderRadius: '100%',
aspectRatio: 1,
width: 'fit-content',
padding: '.75rem',
display: 'flex',
backgroundColor: 'var(--mantine-color-background-0)',
}}
>
<FaLocationArrow
style={{
color: 'var(--mantine-color-accent-0)',
transform: `rotate(${-48 + (selectedDay.windDirection || 0)}deg)`,
}}
/>
</Box>
<Text fz={12}>{selectedDay.windDirection?.toFixed(0)}°</Text>
</Stack>
</Group>
<Group justify='space-between'>
<Stack align='center' justify='center' gap={0}>
<Box
style={{
border: '2px solid var(--mantine-color-primary-0)',
borderRadius: '100%',
aspectRatio: 1,
width: 'fit-content',
padding: '.75rem',
display: 'flex',
backgroundColor: 'var(--mantine-color-background-0)',
}}
>
<FaSun
style={{
color: 'var(--mantine-color-accent-0)',
}}
/>
</Box>
<Text fz={12}>UV {selectedDay.uvIndexMax?.toFixed(0)}</Text>
</Stack>
<Stack gap={4}>
<WeatherFeaturePill
leftSide={
<Group gap={0}>
<WiSunrise
size={18}
style={{
marginTop: '2px',
marginBottom: '2px',
marginLeft: -6,
marginRight: -6,
}}
/>
</Group>
}
rightSide={<Text>{selectedDay.sunrise}</Text>}
highlight='left'
/>
<WeatherFeaturePill
leftSide={
<Group gap={0}>
<WiSunset
size={18}
style={{
marginTop: '2px',
marginBottom: '2px',
marginLeft: -6,
marginRight: -6,
}}
/>
</Group>
}
rightSide={<Text>{selectedDay.sunset}</Text>}
highlight='left'
/>
</Stack>
</Group>
</Group>
<Group w={'100%'} gap={4} justify='space-between'>
<Box w={'48%'}>
<WeatherFeaturePill
leftSide={
<Group gap={2}>
<FaArrowUp size={16} />
<Text>High Temp</Text>
</Group>
}
rightSide={
<Text>
{selectedDay.temperatureMax.toFixed(0)}°<sup>F</sup>
</Text>
}
highlight='right'
/>
</Box>
<Box w={'48%'}>
<WeatherFeaturePill
leftSide={
<Group gap={2}>
<FaArrowDown size={16} />
<Text>Low Temp</Text>
</Group>
}
rightSide={
<Text>
{selectedDay.temperatureMin.toFixed(0)}°<sup>F</sup>
</Text>
}
highlight='right'
/>
</Box>
</Group>
<Group w={'100%'} gap={4} justify='space-between'>
<Box w={'48%'}>
<WeatherFeaturePill
leftSide={
<Group gap={2}>
<FaArrowUp size={16} />
<Text>Feels Like High</Text>
</Group>
}
rightSide={
<Text>
{selectedDay.apparentTemperatureMax.toFixed(0)}°<sup>F</sup>
</Text>
}
highlight='right'
/>
</Box>
<Box w={'48%'}>
<WeatherFeaturePill
leftSide={
<Group gap={2}>
<FaArrowDown size={16} />
<Text>Feels Like Temp</Text>
</Group>
}
rightSide={
<Text>
{selectedDay.apparentTemperatureMin.toFixed(0)}°<sup>F</sup>
</Text>
}
highlight='right'
/>
</Box>
</Group>
<Group w={'100%'} gap={4} justify='space-between'>
<Box w={'48%'}>
<WeatherFeaturePill
leftSide={
<Group gap={2}>
<WiRain size={16} />
<Text>Precipitation %</Text>
</Group>
}
rightSide={<Text>{selectedDay.precipitationProbability}%</Text>}
highlight='right'
/>
</Box>
<Box w={'48%'}>
<WeatherFeaturePill
leftSide={
<Group gap={2}>
<WiRain size={16} />
<Text>Precipitation In.</Text>
</Group>
}
rightSide={<Text>{selectedDay.precipitationSum.toFixed(2)} in.</Text>}
highlight='right'
/>
</Box>
</Group>
</Stack>
</Card>
);
}