86 lines
2.1 KiB
TypeScript
86 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Text } from '@/ui/Text';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Droplets, Sun, Thermometer, Wind, type LucideIcon } from 'lucide-react';
|
|
|
|
interface TrackConditionsPanelProps {
|
|
airTemp: string;
|
|
trackTemp: string;
|
|
humidity: string;
|
|
windSpeed: string;
|
|
weatherType: string;
|
|
}
|
|
|
|
export function TrackConditionsPanel({
|
|
airTemp,
|
|
trackTemp,
|
|
humidity,
|
|
windSpeed,
|
|
weatherType,
|
|
}: TrackConditionsPanelProps) {
|
|
return (
|
|
<Stack as="section" bg="bg-surface-charcoal" border borderColor="border-outline-steel" p={4}>
|
|
<Text size="xs" weight="bold" color="text-gray-500" uppercase block mb={4}>
|
|
Track Conditions
|
|
</Text>
|
|
|
|
<Grid cols={2} mdCols={4} gap={4}>
|
|
<ConditionItem
|
|
icon={Thermometer}
|
|
label="Air Temp"
|
|
value={airTemp}
|
|
color="text-warning-amber"
|
|
/>
|
|
<ConditionItem
|
|
icon={Thermometer}
|
|
label="Track Temp"
|
|
value={trackTemp}
|
|
color="text-critical-red"
|
|
/>
|
|
<ConditionItem
|
|
icon={Droplets}
|
|
label="Humidity"
|
|
value={humidity}
|
|
color="text-telemetry-aqua"
|
|
/>
|
|
<ConditionItem
|
|
icon={Wind}
|
|
label="Wind"
|
|
value={windSpeed}
|
|
color="text-gray-400"
|
|
/>
|
|
</Grid>
|
|
|
|
<Stack mt={4} pt={4} borderTop borderColor="border-outline-steel" bgOpacity={0.5} display="flex" alignItems="center" gap={3}>
|
|
<Icon icon={Sun} size={4} color="#FFBE4D" />
|
|
<Text size="sm" color="text-gray-300">{weatherType}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
function ConditionItem({
|
|
icon,
|
|
label,
|
|
value,
|
|
color
|
|
}: {
|
|
icon: LucideIcon,
|
|
label: string,
|
|
value: string,
|
|
color: string
|
|
}) {
|
|
return (
|
|
<Stack gap={1}>
|
|
<Stack direction="row" alignItems="center" gap={2}>
|
|
<Icon icon={icon} size={3} color="#6b7280" />
|
|
<Text size="xs" color="text-gray-500" weight="bold" uppercase>{label}</Text>
|
|
</Stack>
|
|
<Text size="lg" weight="bold" color={color}>{value}</Text>
|
|
</Stack>
|
|
);
|
|
}
|