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}>

122
src/components/WeatherModal/HourlyCard.tsx
View File

@@ -1,122 +0,0 @@
import { Icon } from '@iconify/react/dist/iconify.js';
import { Box, Card, Center, Group, Image, Stack, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
export enum WindDirection {
N = 0,
NE = 45,
E = 90,
SE = 135,
S = 180,
SW = 225,
W = 270,
NW = 315,
}
export default function HourlyCard({ weather }: any) {
const { isMobile } = useCommonHooks();
return (
<Stack gap={0} align='center' mx={isMobile ? '.25rem' : 0}>
<Card
style={{
height: '8rem',
width: '4rem',
backgroundColor: 'var(--color-text-pri)',
background: 'rgba(255, 255, 255, 0.6)',
padding: 0,
margin: 0,
}}
>
<Stack gap={0} h={'100%'} w={'100%'} align='center'>
<Stack gap={0} align='center'>
<Text fz={12} style={{ zIndex: 2, color: 'black' }}>
{new Date(weather.startTime).toLocaleTimeString('en-US', {
hour: 'numeric',
minute: 'numeric',
})}
</Text>
<Stack gap={0} align='center'>
<Box
style={{
position: 'absolute',
width: '56px',
height: '56px',
backgroundColor: 'transparent',
boxShadow:
'inset 0px 0px 10px 3px rgba(255, 255, 255, 1), 0px 0px 10px 0px rgba(255, 255, 255, .6)',
zIndex: 1,
borderRadius: '100%',
borderStyle: 'none',
border: '0px solid',
}}
/>
<Image
src={weather.icon}
style={{
zIndex: 0,
borderRadius: '100%',
border: '0px solid',
borderStyle: 'none',
}}
/>
</Stack>
</Stack>
<Stack gap={0} align='center' style={{ zIndex: 1 }}>
<Center>
<Icon
icon={'mdi:navigation'}
style={{
position: 'absolute',
transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
color: 'black',
}}
/>
<Icon
fontSize={28}
icon={'mdi:circle-outline'}
style={{ color: 'black' }}
/>
</Center>
<Text mt={-6} fz={12} style={{ color: 'black' }}>
{weather.windSpeed}
</Text>
</Stack>
</Stack>
</Card>
<Text
mt={4}
w={'100%'}
fz={14}
style={{
textAlign: 'center',
borderRadius: '4px',
background: 'rgba(0, 0, 0, 0.6)',
color: 'white',
}}
>
{weather.temperature}°{weather.temperatureUnit}/{weather.relativeHumidity?.value}%
</Text>
<Box
mt={4}
w={'100%'}
fz={14}
style={{
textAlign: 'center',
borderRadius: '4px',
background: 'rgba(0, 0, 0, 0.6)',
color: 'white',
}}
>
<Group gap={0} justify='center'>
<Icon
icon={'mdi:drop'}
style={{
transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
}}
/>
{`${weather.probabilityOfPrecipitation?.value}`}%
</Group>
</Box>
</Stack>
);
}

61
src/components/WeatherModal/SmallOutlookCard.tsx
View File

@@ -1,61 +0,0 @@
import { Icon } from '@iconify/react/dist/iconify.js';
import { Box, Center, Image, Overlay, Stack, Text } from '@mantine/core';
export enum WindDirection {
N = 0,
NE = 45,
E = 90,
SE = 135,
S = 180,
SW = 225,
W = 270,
NW = 315,
}
export default function SmallOutlookCard({ weather }: any) {
return (
<Center display={'flex'}>
<Box pos={'relative'} style={{ zIndex: -1 }}>
<Image radius={'lg'} src={weather.icon === '' ? undefined : weather.icon} />
<Overlay
color='black'
gradient='linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0.35))'
zIndex={0}
radius={'lg'}
/>
</Box>
<Stack h={'124px'} w={'124px'} gap={0} pos={'absolute'}>
<Stack gap={0} align='center' pos={'absolute'} right={0} top={0}>
<Center>
<Icon
icon={'mdi:navigation'}
style={{
position: 'absolute',
transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
color: 'white',
}}
/>
<Icon fontSize={32} icon={'mdi:circle-outline'} style={{ color: 'white' }} />
</Center>
<Text mt={-6} fz={12} style={{ color: 'white' }}>
{weather.windSpeed}
</Text>
</Stack>
<Stack gap={0} pos={'absolute'} bottom={8}>
<Text mt={-4} mb={-4} fz={14} style={{ color: 'white' }}>
Precip:
</Text>
<Text mt={-8} mb={-8} p={0} fz={24} style={{ color: 'white' }}>
{weather.precipitation}%
</Text>
<Text mt={-4} mb={-4} fz={14} style={{ color: 'white' }}>
{weather.isDayTime ? 'High of:' : 'Low of:'}
</Text>
<Text mt={-8} mb={-8} p={0} fz={36} style={{ color: 'white' }}>
{weather.temperature}°F
</Text>
</Stack>
</Stack>
</Center>
);
}

69
src/components/WeatherModal/SmallWeatherCard.tsx
View File

@@ -1,69 +0,0 @@
import { Icon } from '@iconify/react/dist/iconify.js';
import { Box, Center, Group, Image, Overlay, Stack, Text } from '@mantine/core';
export default function SmallWeatherCard({ weather }: any) {
return (
<Center display={'flex'}>
<Box pos={'relative'} style={{ zIndex: -1 }}>
<Image
w={'134px'}
h={'134px'}
radius={'lg'}
src={weather.icon === '' ? undefined : weather.icon}
/>
<Overlay
color='black'
gradient='linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0.35))'
zIndex={0}
radius={'lg'}
/>
</Box>
<Stack h={'124px'} w={'124px'} gap={0} pos={'absolute'}>
<Text mb={-8} p={0} fz={12} style={{ color: 'white' }}>
{weather.highTemp}°F/{weather.lowTemp}°F
</Text>
<Stack gap={0} align='center' pos={'absolute'} right={0} top={0}>
{weather.precipitation !== 'N/A' && (
<Group gap={0}>
<Icon color={'white'} icon={'mdi:weather-pouring'} height={32} width={32} />
<Text style={{ color: 'white' }}>{weather.precipitation} mm</Text>
</Group>
)}
{weather.precipitation === 'N/A' && (
<Icon
icon={'mdi:white-balance-sunny'}
height={32}
width={32}
color={'white'}
/>
)}
<Center>
<Icon
icon={'mdi:navigation'}
color='white'
style={{
position: 'absolute',
transform: `rotate(${weather.windDirection}deg)`,
}}
/>
<Icon fontSize={32} icon={'mdi:circle-outline'} color='white' />
</Center>
<Text mt={-6} fz={12} style={{ color: 'white' }}>
{weather.windSpeed} mph
</Text>
</Stack>
<Stack gap={0} pos={'absolute'} bottom={8}>
<Text mt={-8} mb={-8} p={0} fz={36} style={{ color: 'white' }}>
{weather.temperature}°F
</Text>
<Text mt={-8} fz={12} style={{ color: 'white' }}>
Feels like: {weather.heatIndex}°F
</Text>
<Text mt={-6} fz={12} style={{ color: 'white' }}>
Humidity: {weather.humidity}%
</Text>
</Stack>
</Stack>
</Center>
);
}

127
src/components/WeatherModal/WeatherGraphs.tsx Normal file
View File

@@ -0,0 +1,127 @@
import { Stack, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import {
Area,
CartesianGrid,
ComposedChart,
Legend,
Line,
ResponsiveContainer,
Tooltip,
XAxis,
YAxis,
} from 'recharts';
export default function WeatherGraphs({ hourlyForecast }: any) {
const { theme } = useCommonHooks();
function CustomTooltip({ payload, active }: any) {
if (active) {
return (
<Stack
style={{
backgroundColor: 'var(--color-background)',
padding: '1rem',
borderRadius: '8px',
}}
>
{payload.map((item: any) => (
<Text
key={item.name}
size='sm'
>{`${item.name} - ${item.value}${item.unit}`}</Text>
))}
</Stack>
);
}
return null;
}
return (
<Stack
style={{
background: 'var(--color-search-background)',
padding: '.5rem',
borderRadius: '.5rem',
}}
>
<ResponsiveContainer width={'100%'} height={150}>
<ComposedChart data={hourlyForecast}>
<XAxis
type='category'
stroke={theme.primaryColor}
dataKey={(data: any) => {
return new Date(data.startTime).toLocaleTimeString('en-US', {
hour: 'numeric',
minute: 'numeric',
});
}}
/>
<YAxis stroke={theme.primaryColor} unit={'°F'} dataKey={'temperature'} />
<CartesianGrid stroke='#f5f5f522' />
<Tooltip content={<CustomTooltip />} />
<Line
unit={'°F'}
type='monotone'
name='Temperature'
dataKey='temperature'
stroke={theme.primaryColor}
dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
/>
<Line
unit={'°F'}
type='monotone'
name='Dew Point'
dataKey={(data: any) => {
return (data.dewpoint.value * 9) / 5 + 32;
}}
stroke={theme.accentColor}
dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
/>
<Legend style={{ background: 'var(--color-search-background)' }} />
</ComposedChart>
</ResponsiveContainer>
<ResponsiveContainer width={'100%'} height={150}>
<ComposedChart data={hourlyForecast}>
<XAxis
type='category'
stroke={theme.primaryColor}
dataKey={(data: any) => {
return new Date(data.startTime).toLocaleTimeString('en-US', {
hour: 'numeric',
minute: 'numeric',
});
}}
/>
<YAxis stroke={theme.primaryColor} unit={'%'} domain={[0, 100]} />
<CartesianGrid stroke='#f5f5f522' />
<Tooltip content={<CustomTooltip />} />
<Area
unit={'%'}
type='monotone'
name='Precipitation'
dataKey={(data: any) => {
return data.probabilityOfPrecipitation.value;
}}
stroke={theme.primaryColor}
fill={theme.accentColor}
dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
/>
<Area
unit={'%'}
type='monotone'
name='Humidity'
dataKey={(data: any) => {
return data.relativeHumidity.value;
}}
stroke={theme.accentColor}
fill={theme.accentColor}
dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
/>
<Legend style={{ background: 'var(--color-search-background)' }} />
</ComposedChart>
</ResponsiveContainer>
</Stack>
);
}

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

@@ -15,7 +15,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Clear':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={SunnyIcon}
alt='SunnyIcon'
/>
@@ -23,7 +23,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Cloudy':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={CloudyIcon}
alt='CloudyIcon'
/>
@@ -31,7 +31,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Mostly Cloudy':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={CloudyIcon}
alt='CloudyIcon'
/>
@@ -39,7 +39,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Rain':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={RainIcon}
alt='RainIcon'
/>
@@ -47,7 +47,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Showers':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={RainIcon}
alt='RainIcon'
/>
@@ -55,7 +55,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Drizzle':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={RainIcon}
alt='RainIcon'
/>
@@ -63,7 +63,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Snow':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={SnowIcon}
alt='SnowIcon'
/>
@@ -71,7 +71,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Thunderstorm':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={ThunderstormIcon}
alt='ThunderstormIcon'
/>
@@ -79,7 +79,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Mist':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
@@ -87,7 +87,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Haze':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
@@ -95,7 +95,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Dust':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
@@ -103,7 +103,15 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Fog':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
case 'Patchy Fog':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
@@ -111,7 +119,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Smoke':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
@@ -119,7 +127,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Sand':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
@@ -127,7 +135,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Ash':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
@@ -135,7 +143,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Squall':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
@@ -143,7 +151,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Tornado':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
@@ -151,7 +159,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Freezing Rain':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
@@ -159,7 +167,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Shower Rain':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
@@ -167,7 +175,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Heavy Rain':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={HeavyRainIcon}
alt='HeavyRainIcon'
/>
@@ -175,7 +183,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Scattered Clouds':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={PartlyCloudyIcon}
alt='PartlyCloudyIcon'
/>
@@ -183,7 +191,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Broken Clouds':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={PartlyCloudyIcon}
alt='PartlyCloudyIcon'
/>
@@ -191,7 +199,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Overcast Clouds':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={PartlyCloudyIcon}
alt='PartlyCloudyIcon'
/>
@@ -199,7 +207,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Moderate Rain':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={PartlyCloudyIcon}
alt='PartlyCloudyIcon'
/>
@@ -207,7 +215,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Light Rain':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={PartlyCloudyIcon}
alt='PartlyCloudyIcon'
/>
@@ -215,7 +223,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Heavy Snow':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={SnowIcon}
alt='SnowIcon'
/>
@@ -223,7 +231,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Sleet':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={SleetIcon}
alt='SleetIcon'
/>
@@ -231,7 +239,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
case 'Partly Sunny':
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={PartlyCloudyIcon}
alt='PartlyCloudyIcon'
/>
@@ -239,7 +247,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
default:
return (
<Image
style={{ width: '100px', height: '100px' }}
style={{ width: '75px', height: '75px' }}
src={SunnyIcon}
alt='SunnyIcon'
/>

139
src/components/WeatherModal/WeatherModal.tsx
View File

@@ -3,23 +3,13 @@ import { modalClasses } from 'styles';
import { useCommonHooks, useWeatherAPI } from 'hooks';
import { useEffect, useState } from 'react';
import {
Area,
CartesianGrid,
ComposedChart,
Legend,
Line,
ResponsiveContainer,
Tooltip,
XAxis,
YAxis,
} from 'recharts';
import CurrentWeather from './CurrentWeather';
import ExtendedForecast from './ExtendedForecast';
import WeatherGraphs from './WeatherGraphs';
export function WeatherModal({
current,
outlook,
extendedForecast,
closeWeatherModal,
weatherModalOpened,
@@ -40,30 +30,6 @@ export function WeatherModal({
y: currentLocation.y,
});
const [hourlyForecast, setHourlyForecast] = useState<any>([]);
const [sunset, setSunset] = useState(100);
function CustomTooltip({ payload, active, unit }: any) {
if (active) {
return (
<Stack
style={{
backgroundColor: 'var(--color-background)',
padding: '1rem',
borderRadius: '8px',
}}
>
{payload.map((item: any) => (
<Text
key={item.name}
size='sm'
>{`${item.name} - ${item.value}${item.unit}`}</Text>
))}
</Stack>
);
}
return null;
}
useEffect(() => {
if (hourly) {
@@ -71,18 +37,6 @@ export function WeatherModal({
}
}, [hourly]);
useEffect(() => {
if (hourlyForecast) {
hourlyForecast[0]?.isDaytime
? setSunset(
(hourlyForecast.findIndex((item: any) => item.isDaytime === false) / 12) *
100,
)
: setSunset(
(hourlyForecast.findIndex((item: any) => item.isDaytime === true) / 12) * 100,
);
}
}, [hourlyForecast]);
return (
<Modal.Root
fullScreen={isMobile}
@@ -126,94 +80,7 @@ export function WeatherModal({
<Center w={'100%'}>
<Stack w={'100%'}>
<CurrentWeather weather={current} />
<Stack
style={{
background: 'var(--color-search-background)',
padding: '.5rem',
borderRadius: '.5rem',
}}
>
<ResponsiveContainer width={'100%'} height={150}>
<ComposedChart data={hourlyForecast}>
<XAxis
type='category'
stroke={theme.primaryColor}
dataKey={(data: any) => {
return new Date(data.startTime).toLocaleTimeString('en-US', {
hour: 'numeric',
minute: 'numeric',
});
}}
/>
<YAxis
stroke={theme.primaryColor}
unit={'°F'}
dataKey={'temperature'}
/>
<CartesianGrid stroke='#f5f5f522' />
<Tooltip content={<CustomTooltip />} />
<Line
unit={'°F'}
type='monotone'
name='Temperature'
dataKey='temperature'
stroke={theme.primaryColor}
dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
/>
<Line
unit={'°F'}
type='monotone'
name='Dew Point'
dataKey={(data: any) => {
return (data.dewpoint.value * 9) / 5 + 32;
}}
stroke={theme.accentColor}
dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
/>
<Legend style={{ background: 'var(--color-search-background)' }} />
</ComposedChart>
</ResponsiveContainer>
<ResponsiveContainer width={'100%'} height={150}>
<ComposedChart data={hourlyForecast}>
<XAxis
type='category'
stroke={theme.primaryColor}
dataKey={(data: any) => {
return new Date(data.startTime).toLocaleTimeString('en-US', {
hour: 'numeric',
minute: 'numeric',
});
}}
/>
<YAxis stroke={theme.primaryColor} unit={'%'} domain={[0, 100]} />
<CartesianGrid stroke='#f5f5f522' />
<Tooltip content={<CustomTooltip />} />
<Area
unit={'%'}
type='monotone'
name='Precipitation'
dataKey={(data: any) => {
return data.probabilityOfPrecipitation.value;
}}
stroke={theme.primaryColor}
fill={theme.accentColor}
dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
/>
<Area
unit={'%'}
type='monotone'
name='Humidity'
dataKey={(data: any) => {
return data.relativeHumidity.value;
}}
stroke={theme.accentColor}
fill={theme.accentColor}
dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
/>
<Legend style={{ background: 'var(--color-search-background)' }} />
</ComposedChart>
</ResponsiveContainer>
</Stack>
<WeatherGraphs hourlyForecast={hourlyForecast} />
<ExtendedForecast forecast={extendedForecast} />
</Stack>
</Center>