This commit is contained in:
Sean Edmunds
@@ -1,27 +1,63 @@
|
||||
import { Box, Card, Group, Stack, Text } from '@mantine/core';
|
||||
import { useCommonHooks, useSunStateAPI } from 'hooks';
|
||||
import { useCommonHooks } from 'hooks';
|
||||
import { FaLongArrowAltDown, FaLongArrowAltUp, FaWind } from 'react-icons/fa';
|
||||
import { WiBarometer, WiHumidity, WiSunrise, WiSunset } from 'react-icons/wi';
|
||||
import { textClasses } from 'styles';
|
||||
import type { CurrentWeather as CW, SunState } from 'types';
|
||||
import type { MeteoWeather } from 'types';
|
||||
import WeatherFeaturePill from './WeatherFeaturePill';
|
||||
import WeatherIcon from './WeatherIcon';
|
||||
|
||||
export default function CurrentWeather({ current }: { current: CW }) {
|
||||
const { currentLocation, isMobile, theme, textShadowStyle } = useCommonHooks();
|
||||
const { data: sunStateData } = useSunStateAPI({
|
||||
lat: currentLocation.lat,
|
||||
lon: currentLocation.lon,
|
||||
});
|
||||
const WeatherCodes: { [key: number]: string } = {
|
||||
0: 'Clear sky',
|
||||
|
||||
const sunStates: SunState[] =
|
||||
sunStateData?.results.map((item: SunState) => {
|
||||
return {
|
||||
date: item.date,
|
||||
sunrise: item.sunrise,
|
||||
sunset: item.sunset,
|
||||
};
|
||||
}) || [];
|
||||
1: 'Mainly clear',
|
||||
2: 'Partly cloudy',
|
||||
3: 'Overcast',
|
||||
|
||||
45: 'Fog',
|
||||
48: 'Depositing rime fog',
|
||||
|
||||
51: 'Drizzle: Light',
|
||||
53: 'Drizzle: Moderate',
|
||||
55: 'Drizzle: Dense',
|
||||
|
||||
56: 'Freezing Drizzle: Light',
|
||||
57: 'Freezing Drizzle: Dense',
|
||||
|
||||
61: 'Rain: Slight',
|
||||
63: 'Rain: Moderate',
|
||||
65: 'Rain: Heavy',
|
||||
|
||||
66: 'Freezing Rain: Light',
|
||||
67: 'Freezing Rain: Heavy',
|
||||
|
||||
71: 'Snowfall: Slight',
|
||||
73: 'Snowfall: Moderate',
|
||||
75: 'Snowfall: Heavy',
|
||||
|
||||
77: 'Snow grains',
|
||||
|
||||
80: 'Rain showers: Slight',
|
||||
81: 'Rain showers: Moderate',
|
||||
82: 'Rain showers: Violent',
|
||||
|
||||
85: 'Snow showers: Slight',
|
||||
86: 'Snow showers: Heavy',
|
||||
|
||||
95: 'Thunderstorm: Slight or moderate',
|
||||
96: 'Thunderstorm with slight hail',
|
||||
99: 'Thunderstorm with heavy hail',
|
||||
} as const;
|
||||
|
||||
export default function CurrentWeather({
|
||||
current,
|
||||
}: {
|
||||
current: MeteoWeather | undefined;
|
||||
}) {
|
||||
const { isMobile, theme, textShadowStyle } = useCommonHooks();
|
||||
|
||||
const sunrise = new Date(current?.daily.sunrise[0] || 0).toLocaleTimeString();
|
||||
const sunset = new Date(current?.daily.sunset[0] || 0).toLocaleTimeString();
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -71,25 +107,11 @@ export default function CurrentWeather({ current }: { current: CW }) {
|
||||
opacity: 0.5,
|
||||
}}
|
||||
>
|
||||
<WeatherIcon
|
||||
size={'lg'}
|
||||
textDescription={`${
|
||||
current.textDescription.includes('and')
|
||||
? current.textDescription.substring(
|
||||
0,
|
||||
current.textDescription.indexOf('and'),
|
||||
)
|
||||
: current.textDescription.includes('then')
|
||||
? current.textDescription.substring(
|
||||
0,
|
||||
current.textDescription.indexOf('then'),
|
||||
)
|
||||
: current.textDescription
|
||||
}`}
|
||||
/>
|
||||
<WeatherIcon size={'lg'} code={current.current.weather_code} />
|
||||
</Box>
|
||||
<Text fz={isMobile ? '5rem' : '7rem'} fw={400}>
|
||||
{current.temperature}°<sup style={{ fontSize: '3rem' }}>F</sup>
|
||||
{current.current.temperature_2m?.toFixed(0)}°
|
||||
<sup style={{ fontSize: '3rem' }}>F</sup>
|
||||
</Text>
|
||||
<Box
|
||||
style={{
|
||||
@@ -108,7 +130,11 @@ export default function CurrentWeather({ current }: { current: CW }) {
|
||||
/>
|
||||
</Group>
|
||||
<Group
|
||||
justify={current.textDescription.length > 25 ? 'flex-start' : 'center'}
|
||||
justify={
|
||||
WeatherCodes[Number(current.current.weather_code)].length > 25
|
||||
? 'flex-start'
|
||||
: 'center'
|
||||
}
|
||||
style={{
|
||||
width: '100%',
|
||||
maxWidth: '180px',
|
||||
@@ -120,13 +146,15 @@ export default function CurrentWeather({ current }: { current: CW }) {
|
||||
>
|
||||
<Text
|
||||
className={
|
||||
current.textDescription.length > 25
|
||||
WeatherCodes[Number(current.current.weather_code)].length > 25
|
||||
? textClasses.autoScrollText
|
||||
: undefined
|
||||
}
|
||||
classNames={textClasses}
|
||||
>
|
||||
{current.temperature === 69 ? 'Nice' : current.textDescription}
|
||||
{current.current.temperature_2m?.toFixed(0) === '69'
|
||||
? 'Nice'
|
||||
: WeatherCodes[Number(current.current.weather_code)]}
|
||||
</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
@@ -134,8 +162,9 @@ export default function CurrentWeather({ current }: { current: CW }) {
|
||||
leftSide={<Text>Feels like </Text>}
|
||||
rightSide={
|
||||
<Text>
|
||||
{current.heatIndex ?? current.windChill ?? current.temperature}°
|
||||
<sup>F</sup>
|
||||
{current.current.apparent_temperature?.toFixed(0) ??
|
||||
current.current.temperature_2m?.toFixed(0)}
|
||||
°<sup>F</sup>
|
||||
</Text>
|
||||
}
|
||||
highlight='right'
|
||||
@@ -164,7 +193,7 @@ export default function CurrentWeather({ current }: { current: CW }) {
|
||||
}
|
||||
rightSide={
|
||||
<Text>
|
||||
{current.highTemp}°<sup>F</sup>
|
||||
{current.daily.temperature_2m_max?.[0].toFixed(0)}°<sup>F</sup>
|
||||
</Text>
|
||||
}
|
||||
highlight='right'
|
||||
@@ -178,7 +207,7 @@ export default function CurrentWeather({ current }: { current: CW }) {
|
||||
}
|
||||
rightSide={
|
||||
<Text>
|
||||
{current.lowTemp}°<sup>F</sup>
|
||||
{current.daily.temperature_2m_min?.[0].toFixed(0)}°<sup>F</sup>
|
||||
</Text>
|
||||
}
|
||||
highlight='right'
|
||||
@@ -205,7 +234,7 @@ export default function CurrentWeather({ current }: { current: CW }) {
|
||||
Humidity
|
||||
</Group>
|
||||
}
|
||||
rightSide={<Text>{current.humidity}%</Text>}
|
||||
rightSide={<Text>{current.current.relative_humidity_2m}%</Text>}
|
||||
highlight='right'
|
||||
/>
|
||||
<WeatherFeaturePill
|
||||
@@ -215,7 +244,9 @@ export default function CurrentWeather({ current }: { current: CW }) {
|
||||
Wind
|
||||
</Group>
|
||||
}
|
||||
rightSide={<Text>{current.windSpeed}mph</Text>}
|
||||
rightSide={
|
||||
<Text>{current.current.wind_speed_10m?.toFixed(0)}mph</Text>
|
||||
}
|
||||
highlight='right'
|
||||
/>
|
||||
<WeatherFeaturePill
|
||||
@@ -225,7 +256,9 @@ export default function CurrentWeather({ current }: { current: CW }) {
|
||||
Pressure
|
||||
</Group>
|
||||
}
|
||||
rightSide={<Text>{current.pressure} in</Text>}
|
||||
rightSide={
|
||||
<Text>{current.current.surface_pressure?.toFixed(0)} mbar</Text>
|
||||
}
|
||||
highlight='right'
|
||||
/>
|
||||
</Group>
|
||||
@@ -257,7 +290,7 @@ export default function CurrentWeather({ current }: { current: CW }) {
|
||||
/>
|
||||
</Group>
|
||||
}
|
||||
rightSide={<Text>{sunStates[0]?.sunrise}</Text>}
|
||||
rightSide={<Text>{sunrise}</Text>}
|
||||
highlight='left'
|
||||
/>
|
||||
<WeatherFeaturePill
|
||||
@@ -274,7 +307,7 @@ export default function CurrentWeather({ current }: { current: CW }) {
|
||||
/>
|
||||
</Group>
|
||||
}
|
||||
rightSide={<Text>{sunStates[0]?.sunset}</Text>}
|
||||
rightSide={<Text>{sunset}</Text>}
|
||||
highlight='left'
|
||||
/>
|
||||
</Group>
|
||||
|
||||
Reference in New Issue
Block a user