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

145
src/components/WeatherModal/CurrentWeather.tsx Normal file
View File

@@ -0,0 +1,145 @@
import { Grid, Group, Stack, Text, ThemeIcon } from '@mantine/core';
import { FaLongArrowAltDown, FaLongArrowAltUp, FaWind } from 'react-icons/fa';
import { WiBarometer, WiHumidity } from 'react-icons/wi';
import WeatherIcon from './WeatherIcon';
export default function CurrentWeather({ weather }: any) {
return (
<Stack
gap={0}
w={'100%'}
justify='space-between'
style={{
backgroundColor: 'var(--color-search-background)',
padding: '1rem',
borderRadius: '8px',
paddingBottom: '.5rem',
}}
>
<Group gap={0} px={16} w={'100%'}>
<Text
c={'var(--color-text-pri)'}
style={{
fontSize: '1.375rem',
textAlign: 'left',
}}
>
Current Weather
</Text>
</Group>
<Group gap={0} w={'100%'}>
<Stack gap={0} w={'50%'}>
<Group gap={0}>
<WeatherIcon textDescription={`${weather.textDescription}`} />
<Text fz={'7rem'} fw={200}>
{weather.temperature}°<sup style={{ fontSize: '3rem' }}>F</sup>
</Text>
</Group>
<Text
c={'var(--color-text-pri)'}
style={{
fontSize: '1.375rem',
textAlign: 'left',
marginTop: -32,
marginLeft: 16,
}}
>
{weather.textDescription}
</Text>
</Stack>
<Stack gap={4} w={'50%'}>
<Text>
Feels like {weather.heatIndex ?? weather.windChill ?? weather.temperature}°
<sup>F</sup>
</Text>
<Grid align='center' w={'100%'}>
<Grid.Col span={2}>
<ThemeIcon
h={'auto'}
w={'auto'}
variant='subtle'
c={'var(--color-text-pri)'}
>
<FaLongArrowAltUp size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col span={1}>
<Text>
{weather.highTemp}°<sup>F</sup>
</Text>
</Grid.Col>
<Grid.Col span={2}>
<ThemeIcon
h={'auto'}
w={'auto'}
variant='subtle'
c={'var(--color-text-pri)'}
>
<FaLongArrowAltDown size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col span={1}>
<Text>
{weather.lowTemp}°<sup>F</sup>
</Text>
</Grid.Col>
</Grid>
<Grid align='center'>
<Grid.Col span={2}>
<ThemeIcon
h={'auto'}
w={'auto'}
variant='subtle'
c={'var(--color-text-pri)'}
>
<WiHumidity size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col span={2}>
<Text>Humidity</Text>
</Grid.Col>
<Grid.Col span={2}>
<Text>{weather.humidity}%</Text>
</Grid.Col>
</Grid>
<Grid align='center'>
<Grid.Col span={2}>
<ThemeIcon
h={'auto'}
w={'auto'}
variant='subtle'
c={'var(--color-text-pri)'}
>
<FaWind size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col span={2}>
<Text>Wind</Text>
</Grid.Col>
<Grid.Col span={2}>
<Text>{weather.windSpeed}mph</Text>
</Grid.Col>
</Grid>
<Grid align='center'>
<Grid.Col span={2}>
<ThemeIcon
h={'auto'}
w={'auto'}
variant='subtle'
c={'var(--color-text-pri)'}
>
<WiBarometer size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col span={2}>
<Text>Pressure</Text>
</Grid.Col>
<Grid.Col span={2}>
<Text>{weather.pressure} in</Text>
</Grid.Col>
</Grid>
</Stack>
</Group>
</Stack>
);
}