168 lines
3.7 KiB
TypeScript
168 lines
3.7 KiB
TypeScript
import { Group, Stack, Text } from '@mantine/core';
|
|
import { WeatherModal } from 'components';
|
|
import { useEffect, useState } from 'react';
|
|
import { textClasses } from 'styles';
|
|
|
|
function Header({
|
|
greet,
|
|
date,
|
|
isMobile,
|
|
current,
|
|
setCurrent,
|
|
weather,
|
|
basicWeather,
|
|
outlook,
|
|
hourly,
|
|
weatherModalOpened,
|
|
closeWeatherModal,
|
|
openWeatherModal,
|
|
setValue,
|
|
setProviderLabel,
|
|
setProviderURL,
|
|
}: any) {
|
|
const [time, setTime] = useState(new Date());
|
|
function fixDigits(k: any) {
|
|
if (k < 10) {
|
|
return `0${k}`;
|
|
}
|
|
return k;
|
|
}
|
|
|
|
useEffect(() => {
|
|
setInterval(() => {
|
|
const nwDate = new Date();
|
|
setTime(nwDate);
|
|
}, 1000);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (weather && basicWeather) {
|
|
setCurrent({
|
|
icon: weather.features[0].properties.icon?.replace('medium', 'large') || '',
|
|
temperature: Math.round(
|
|
(weather.features[0].properties.temperature.value * 9) / 5 + 32,
|
|
),
|
|
highTemp: Math.round(
|
|
(basicWeather.properties.maxTemperature.values[0].value * 9) / 5 + 32,
|
|
),
|
|
lowTemp: Math.round(
|
|
(basicWeather.properties.minTemperature.values[0].value * 9) / 5 + 32,
|
|
),
|
|
precipitation:
|
|
weather.features[0].properties.precipitationLastHour.value || 'N/A',
|
|
humidity: Math.round(weather.features[0].properties.relativeHumidity.value),
|
|
heatIndex: Math.round(
|
|
(weather.features[0].properties.heatIndex.value * 9) / 5 + 32,
|
|
),
|
|
windSpeed: Math.round(weather.features[0].properties.windSpeed.value / 1.60934),
|
|
windDirection: weather.features[0].properties.windDirection.value,
|
|
});
|
|
}
|
|
}, [weather, basicWeather]);
|
|
|
|
return (
|
|
<Stack
|
|
style={{
|
|
borderBottom: '0px solid',
|
|
zIndex: '1',
|
|
clear: 'both',
|
|
display: 'flex',
|
|
flexDirection: isMobile ? 'column' : 'row',
|
|
gap: 0,
|
|
}}
|
|
>
|
|
<Stack
|
|
style={{
|
|
display: 'grid',
|
|
width: '100%',
|
|
}}
|
|
>
|
|
<Text
|
|
className={textClasses.greeting}
|
|
classNames={textClasses}
|
|
fz={isMobile && 24}
|
|
>
|
|
{greet}
|
|
</Text>
|
|
</Stack>
|
|
<Stack
|
|
style={{
|
|
display: 'flex',
|
|
float: 'right',
|
|
justifyContent: 'right',
|
|
width: 'auto',
|
|
gap: 0,
|
|
flexDirection: isMobile ? 'row' : 'column',
|
|
}}
|
|
>
|
|
<Text
|
|
className={textClasses.dateTime}
|
|
classNames={textClasses}
|
|
style={{ width: 'max-content' }}
|
|
>
|
|
{date}
|
|
</Text>
|
|
<Group
|
|
style={{
|
|
position: 'relative',
|
|
justifyContent: isMobile ? 'right' : 'space-between',
|
|
width: '100%',
|
|
gap: 0,
|
|
}}
|
|
>
|
|
<Group
|
|
gap={0}
|
|
align='end'
|
|
style={{
|
|
display: 'flex',
|
|
position: 'absolute',
|
|
bottom: isMobile ? -32 : 0,
|
|
right: 16,
|
|
}}
|
|
onClick={openWeatherModal}
|
|
>
|
|
<Text
|
|
component='h2'
|
|
mr={4}
|
|
className={textClasses.dateTime}
|
|
classNames={textClasses}
|
|
>
|
|
{current.temperature}°F
|
|
</Text>
|
|
<Text
|
|
mb={6}
|
|
className={textClasses.dateTime}
|
|
classNames={textClasses}
|
|
fz={14}
|
|
>
|
|
{current.highTemp}°F/{current.lowTemp}°F
|
|
</Text>
|
|
</Group>
|
|
<Text component='h2' className={textClasses.dateTime} classNames={textClasses}>
|
|
{`${
|
|
time.getHours() === 0
|
|
? 12
|
|
: time.getHours() > 12
|
|
? time.getHours() - 12
|
|
: time.getHours()
|
|
}:${fixDigits(time.getMinutes())} ${time.getHours() >= 12 ? 'PM' : 'AM'}`}
|
|
</Text>
|
|
</Group>
|
|
</Stack>
|
|
<WeatherModal
|
|
current={current}
|
|
outlook={outlook}
|
|
hourly={hourly}
|
|
closeWeatherModal={closeWeatherModal}
|
|
weatherModalOpened={weatherModalOpened}
|
|
setValue={setValue}
|
|
setProviderLabel={setProviderLabel}
|
|
setProviderURL={setProviderURL}
|
|
isMobile={isMobile}
|
|
/>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
export default Header;
|