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

Style updates

Browse Source
This commit is contained in:
Sean Edmunds
2025-02-11 15:23:48 -06:00
parent b62ad44358
commit bfd958d78f
19 changed files with 574 additions and 702 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,33 @@
import { Grid, Group, Stack, Text, ThemeIcon } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { useSunStateAPI } from 'hooks/useAPI';
import { useEffect, useState } from 'react';
import { FaLongArrowAltDown, FaLongArrowAltUp, FaWind } from 'react-icons/fa';
import { WiBarometer, WiHumidity } from 'react-icons/wi';
import { WiBarometer, WiHumidity, WiSunrise, WiSunset } from 'react-icons/wi';
import WeatherIcon from './WeatherIcon';
export default function CurrentWeather({ weather }: any) {
const { currentLocation } = useCommonHooks();
const { data: sunStateData } = useSunStateAPI({
lat: currentLocation.lat,
lon: currentLocation.lon,
});
const [sunStates, setSunStates] = useState<any>([]);
useEffect(() => {
if (sunStateData) {
setSunStates(
sunStateData.results.map((item: any) => {
return {
date: item.date,
sunrise: item.sunrise,
sunset: item.sunset,
};
}),
);
}
}, [sunStateData]);
return (
<Stack
gap={0}
@@ -16,7 +40,7 @@ export default function CurrentWeather({ weather }: any) {
paddingBottom: '.5rem',
}}
>
<Group gap={0} px={16} w={'100%'}>
<Group gap={0} px={16} w={'100%'} justify='space-between'>
<Text
c={'var(--color-text-pri)'}
style={{
@@ -30,7 +54,21 @@ export default function CurrentWeather({ weather }: any) {
<Group gap={8} w={'100%'} justify='space-between'>
<Stack gap={0} w={'45%'}>
<Group gap={0} justify='flex-end'>
<WeatherIcon textDescription={`${weather.textDescription}`} />
<WeatherIcon
textDescription={`${
weather.textDescription.includes('and')
? weather.textDescription.substring(
0,
weather.textDescription.indexOf('and'),
)
: weather.textDescription.includes('then')
? weather.textDescription.substring(
0,
weather.textDescription.indexOf('then'),
)
: weather.textDescription
}`}
/>
<Text fz={'7rem'} fw={200}>
{weather.temperature}°<sup style={{ fontSize: '3rem' }}>F</sup>
</Text>
@@ -52,8 +90,8 @@ export default function CurrentWeather({ weather }: any) {
Feels like {weather.heatIndex ?? weather.windChill ?? weather.temperature}°
<sup>F</sup>
</Text>
<Grid align='center' w={'100%'}>
<Grid.Col span={2}>
<Grid align='center'>
<Grid.Col span={1}>
<ThemeIcon
h={'auto'}
w={'auto'}
@@ -63,12 +101,12 @@ export default function CurrentWeather({ weather }: any) {
<FaLongArrowAltUp size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col span={1}>
<Grid.Col span={3}>
<Text>
{weather.highTemp}°<sup>F</sup>
</Text>
</Grid.Col>
<Grid.Col span={2}>
<Grid.Col span={1}>
<ThemeIcon
h={'auto'}
w={'auto'}
@@ -85,7 +123,35 @@ export default function CurrentWeather({ weather }: any) {
</Grid.Col>
</Grid>
<Grid align='center'>
<Grid.Col span={2}>
<Grid.Col span={1}>
<ThemeIcon
h={'auto'}
w={'auto'}
variant='subtle'
c={'var(--color-text-pri)'}
>
<WiSunrise size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col span={3}>
<Text>{sunStates[0]?.sunrise}</Text>
</Grid.Col>
<Grid.Col span={1}>
<ThemeIcon
h={'auto'}
w={'auto'}
variant='subtle'
c={'var(--color-text-pri)'}
>
<WiSunset size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col span={3}>
<Text>{sunStates[0]?.sunset}</Text>
</Grid.Col>
</Grid>
<Grid align='center'>
<Grid.Col span={1}>
<ThemeIcon
h={'auto'}
w={'auto'}
@@ -95,7 +161,7 @@ export default function CurrentWeather({ weather }: any) {
<WiHumidity size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col span={2}>
<Grid.Col span={3}>
<Text>Humidity</Text>
</Grid.Col>
<Grid.Col span={2}>
@@ -103,7 +169,7 @@ export default function CurrentWeather({ weather }: any) {
</Grid.Col>
</Grid>
<Grid align='center'>
<Grid.Col span={2}>
<Grid.Col span={1}>
<ThemeIcon
h={'auto'}
w={'auto'}
@@ -113,7 +179,7 @@ export default function CurrentWeather({ weather }: any) {
<FaWind size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col span={2}>
<Grid.Col span={3}>
<Text>Wind</Text>
</Grid.Col>
<Grid.Col span={2}>
@@ -121,7 +187,7 @@ export default function CurrentWeather({ weather }: any) {
</Grid.Col>
</Grid>
<Grid align='center'>
<Grid.Col span={2}>
<Grid.Col span={1}>
<ThemeIcon
h={'auto'}
w={'auto'}
@@ -131,7 +197,7 @@ export default function CurrentWeather({ weather }: any) {
<WiBarometer size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col span={2}>
<Grid.Col span={3}>
<Text>Pressure</Text>
</Grid.Col>
<Grid.Col span={2}>