87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
import { Card, Group, SimpleGrid, Stack, Text } from '@mantine/core';
|
|
import { useCommonHooks } from 'hooks';
|
|
import { textClasses } from 'styles';
|
|
import type { ExtendedForecast } from 'types';
|
|
import WeatherIcon from './WeatherIcon';
|
|
|
|
export default function ExtendedForecastCard({
|
|
forecast,
|
|
}: {
|
|
forecast: ExtendedForecast[];
|
|
}) {
|
|
const { isMobile, theme } = useCommonHooks();
|
|
const day = forecast.slice(2, 14).filter((item: ExtendedForecast) => item.isDaytime);
|
|
const night = forecast.slice(2, 14).filter((item: ExtendedForecast) => !item.isDaytime);
|
|
return (
|
|
<Card
|
|
w={'100%'}
|
|
style={{
|
|
color: 'var(--mantine-color-primary-0)',
|
|
backgroundColor: 'var(--mantine-color-search-0)',
|
|
padding: '1rem',
|
|
borderRadius: '8px',
|
|
paddingBottom: '.5rem',
|
|
marginTop: '.5rem',
|
|
overflow: 'visible',
|
|
}}
|
|
>
|
|
<Text
|
|
className={textClasses.weatherTitle}
|
|
classNames={textClasses}
|
|
style={{
|
|
textShadow: theme.textShadowsEnabled
|
|
? '2px 2px var(--mantine-color-border-0)'
|
|
: undefined,
|
|
}}
|
|
>
|
|
Extended Forecast
|
|
</Text>
|
|
<SimpleGrid w={'100%'} pt={'.5rem'} cols={isMobile ? 3 : 6}>
|
|
{day.map((item: ExtendedForecast, index: number) => {
|
|
const short = item.shortForecast.includes('And')
|
|
? item.shortForecast.substring(0, item.shortForecast.indexOf('And'))
|
|
: item.shortForecast.includes('then')
|
|
? item.shortForecast.substring(0, item.shortForecast.indexOf('then'))
|
|
: item.shortForecast;
|
|
|
|
return (
|
|
<Stack
|
|
key={item.name}
|
|
gap={0}
|
|
align='center'
|
|
bg={'var(--mantine-color-background-0)'}
|
|
style={{
|
|
borderRadius: '8px',
|
|
}}
|
|
>
|
|
<Text>{item.name}</Text>
|
|
<WeatherIcon size='md' textDescription={short} />
|
|
<Group
|
|
justify={short.length > 15 ? 'flex-start' : 'center'}
|
|
style={{
|
|
width: '100%',
|
|
whiteSpace: 'nowrap',
|
|
overflow: 'hidden',
|
|
boxSizing: 'border-box',
|
|
position: 'relative',
|
|
}}
|
|
>
|
|
<Text
|
|
className={short.length > 15 ? textClasses.autoScrollText : undefined}
|
|
classNames={textClasses}
|
|
>
|
|
{short}
|
|
</Text>
|
|
</Group>
|
|
<Text>
|
|
{item.temperature}°{item.temperatureUnit}/{night[index].temperature}°
|
|
{item.temperatureUnit}
|
|
</Text>
|
|
</Stack>
|
|
);
|
|
})}
|
|
</SimpleGrid>
|
|
</Card>
|
|
);
|
|
}
|