More typing and fixes

src/components/WeatherModal/ExtendedForecastCard.tsx

@@ -0,0 +1,84 @@
+import { Group, 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 day = forecast.slice(2, 14).filter((item: ExtendedForecast) => item.isDaytime);
+	const night = forecast.slice(2, 14).filter((item: ExtendedForecast) => !item.isDaytime);
+
+	const { isMobile } = useCommonHooks();
+	return (
+		<Stack
+			gap={0}
+			w={'100%'}
+			justify='space-between'
+			style={{
+				backgroundColor: 'var(--color-search-background)',
+				padding: '1rem',
+				borderRadius: '8px',
+				paddingBottom: '.5rem',
+			}}
+		>
+			<Group gap={0} style={{ width: '100%', marginBottom: '8px', paddingLeft: '16px' }}>
+				<Text
+					style={{
+						fontSize: '1.375rem',
+						textAlign: 'left',
+					}}
+				>
+					Extended Forecast
+				</Text>
+			</Group>
+			<Group w={'100%'} align='center' justify='space-between'>
+				{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
+							w={isMobile ? '30%' : '15%'}
+							key={item.name}
+							gap={0}
+							align='center'
+							bg={'var(--color-background)'}
+							style={{
+								borderRadius: '8px',
+							}}
+						>
+							<Text>{item.name}</Text>
+							<WeatherIcon 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>
+					);
+				})}
+			</Group>
+		</Stack>
+	);
+}