Refactor
This commit is contained in:
Sean Edmunds
120
src/components/WeatherModal/HourlyCard.tsx
Normal file
120
src/components/WeatherModal/HourlyCard.tsx
Normal file
@@ -0,0 +1,120 @@
|
||||
import { Icon } from '@iconify/react/dist/iconify.js';
|
||||
import { Box, Card, Center, Group, Image, 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 HourlyCard({ weather }: any) {
|
||||
return (
|
||||
<Stack gap={0} align='center'>
|
||||
<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 mb={-6} fz={12} style={{ zIndex: 2 }}>
|
||||
{new Date(weather.startTime).toLocaleString('en-US', {
|
||||
weekday: 'short',
|
||||
month: 'numeric',
|
||||
day: 'numeric',
|
||||
})}
|
||||
</Text>
|
||||
<Text fz={12} style={{ zIndex: 2 }}>
|
||||
{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)`,
|
||||
}}
|
||||
/>
|
||||
<Icon fontSize={28} icon={'mdi:circle-outline'} />
|
||||
</Center>
|
||||
<Text mt={-6} fz={12}>
|
||||
{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)',
|
||||
}}
|
||||
>
|
||||
{weather.temperature}°{weather.temperatureUnit}/{weather.relativeHumidity.value}%
|
||||
</Text>
|
||||
<Text
|
||||
mt={4}
|
||||
w={'100%'}
|
||||
fz={14}
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
borderRadius: '4px',
|
||||
background: 'rgba(0, 0, 0, 0.6)',
|
||||
}}
|
||||
>
|
||||
<Group gap={0} justify='center'>
|
||||
<Icon
|
||||
icon={'mdi:drop'}
|
||||
style={{
|
||||
transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
|
||||
}}
|
||||
/>
|
||||
{`${weather.probabilityOfPrecipitation.value}`}%
|
||||
</Group>
|
||||
</Text>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
60
src/components/WeatherModal/SmallOutlookCard.tsx
Normal file
60
src/components/WeatherModal/SmallOutlookCard.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
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} />
|
||||
<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)`,
|
||||
}}
|
||||
/>
|
||||
<Icon fontSize={32} icon={'mdi:circle-outline'} />
|
||||
</Center>
|
||||
<Text mt={-6} fz={12}>
|
||||
{weather.windSpeed}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Stack gap={0} pos={'absolute'} bottom={8}>
|
||||
<Text mt={-4} mb={-4} fz={14}>
|
||||
Precip:
|
||||
</Text>
|
||||
<Text mt={-8} mb={-8} p={0} fz={24}>
|
||||
{weather.precipitation}%
|
||||
</Text>
|
||||
<Text mt={-4} mb={-4} fz={14}>
|
||||
{weather.isDayTime ? 'High of:' : 'Low of:'}
|
||||
</Text>
|
||||
<Text mt={-8} mb={-8} p={0} fz={36}>
|
||||
{weather.temperature}°F
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
58
src/components/WeatherModal/SmallWeatherCard.tsx
Normal file
58
src/components/WeatherModal/SmallWeatherCard.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
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 radius={'lg'} src={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}>
|
||||
{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 icon={'mdi:weather-pouring'} height={32} width={32} />
|
||||
<Text>{weather.precipitation} mm</Text>
|
||||
</Group>
|
||||
)}
|
||||
{weather.precipitation === 'N/A' && (
|
||||
<Icon icon={'mdi:white-balance-sunny'} height={32} width={32} />
|
||||
)}
|
||||
<Center>
|
||||
<Icon
|
||||
icon={'mdi:navigation'}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
transform: `rotate(${weather.windDirection}deg)`,
|
||||
}}
|
||||
/>
|
||||
<Icon fontSize={32} icon={'mdi:circle-outline'} />
|
||||
</Center>
|
||||
<Text mt={-6} fz={12}>
|
||||
{weather.windSpeed} mph
|
||||
</Text>
|
||||
</Stack>
|
||||
<Stack gap={0} pos={'absolute'} bottom={8}>
|
||||
<Text mt={-8} mb={-8} p={0} fz={36}>
|
||||
{weather.temperature}°F
|
||||
</Text>
|
||||
<Text mt={-8} fz={12}>
|
||||
Feels like: {weather.heatIndex}°F
|
||||
</Text>
|
||||
<Text mt={-6} fz={12}>
|
||||
Humidity: {weather.humidity}%
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
116
src/components/WeatherModal/WeatherModal.tsx
Normal file
116
src/components/WeatherModal/WeatherModal.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
import { Center, Divider, Group, Modal, Stack } from '@mantine/core';
|
||||
import { useAtom } from 'jotai';
|
||||
import { modalClasses } from 'styles';
|
||||
import SmallOutlookCard from './SmallOutlookCard';
|
||||
import SmallWeatherCard from './SmallWeatherCard';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { appTheme } from '../../contexts/theme';
|
||||
import HourlyCard from './HourlyCard';
|
||||
|
||||
export function WeatherModal({
|
||||
current,
|
||||
outlook,
|
||||
hourly,
|
||||
closeWeatherModal,
|
||||
weatherModalOpened,
|
||||
setValue,
|
||||
setProviderLabel,
|
||||
setProviderURL,
|
||||
}: any) {
|
||||
const [theme, _] = useAtom(appTheme);
|
||||
const [hourlyForecast, setHourlyForecast] = useState<any>([]);
|
||||
const [sunset, setSunset] = useState(100);
|
||||
|
||||
useEffect(() => {
|
||||
if (hourly) {
|
||||
setHourlyForecast(hourly.properties.periods.slice(1, 13));
|
||||
}
|
||||
}, [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
|
||||
size={'60%'}
|
||||
className={modalClasses.helpModal}
|
||||
classNames={modalClasses}
|
||||
opened={weatherModalOpened}
|
||||
onClose={() => {
|
||||
closeWeatherModal();
|
||||
setValue('');
|
||||
setProviderLabel('Google Search');
|
||||
setProviderURL('https://www.google.com/search?q=');
|
||||
}}
|
||||
style={{
|
||||
'--color-text-pri': theme.primaryColor,
|
||||
'--color-text-acc': theme.accentColor,
|
||||
'--color-background': theme.backgroundColor,
|
||||
'--color-border': theme.borderColor,
|
||||
'--color-search-background': theme.searchColor,
|
||||
'--image-background': `url(${theme.backgroundImage})`,
|
||||
}}
|
||||
closeOnEscape
|
||||
closeOnClickOutside
|
||||
>
|
||||
<Modal.Overlay />
|
||||
<Modal.Content>
|
||||
<Modal.Header>
|
||||
<Modal.Title>Weather Forecast</Modal.Title>
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body pb={'2rem'}>
|
||||
<Center w={'100%'}>
|
||||
<Stack>
|
||||
<Group gap={0} w={'100%'} align='center' justify='center'>
|
||||
<Stack gap={0} align='center'>
|
||||
<h3 style={{ padding: 0, margin: 0 }}>Currently</h3>
|
||||
<Stack>
|
||||
<SmallWeatherCard weather={current} />
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Divider orientation='vertical' mx={16} color={theme.accentColor} />
|
||||
<Group gap={8}>
|
||||
{outlook.map((o: any) => (
|
||||
<Stack key={o.name} gap={0} align='center'>
|
||||
<h3 style={{ padding: 0, margin: 0 }}>{o.name}</h3>
|
||||
<Stack>
|
||||
<SmallOutlookCard weather={o} />
|
||||
</Stack>
|
||||
</Stack>
|
||||
))}
|
||||
</Group>
|
||||
</Group>
|
||||
<Divider orientation='horizontal' mx={8} color={theme.accentColor} />
|
||||
<Group
|
||||
style={{
|
||||
background:
|
||||
hourlyForecast.length > 0 && hourlyForecast[0].isDaytime
|
||||
? `linear-gradient(90deg, rgba(245, 225, 171, 0.85) ${sunset - 5}%, rgba(35, 28, 42, 0.85) ${sunset + 5}%)`
|
||||
: `linear-gradient(90deg, rgba(35, 28, 42, 0.85)${sunset - 5}%, rgba(245, 225, 171, 0.85)${sunset + 5}%)`,
|
||||
padding: '.5rem',
|
||||
borderRadius: '.5rem',
|
||||
}}
|
||||
>
|
||||
{hourlyForecast.length > 0 &&
|
||||
hourlyForecast.map((h: any) => {
|
||||
return <HourlyCard key={h.time} weather={h} />;
|
||||
})}
|
||||
</Group>
|
||||
</Stack>
|
||||
</Center>
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
</Modal.Root>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user