61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { MetricCard } from '@/ui/MetricCard';
|
|
import { Activity, Users, Trophy, Calendar } from 'lucide-react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Container } from '@/ui/Container';
|
|
|
|
/**
|
|
* HomeStatsStrip - A thin strip showing some status or quick info.
|
|
* Part of the "Telemetry-workspace" feel.
|
|
* Refactored to use semantic HTML and Tailwind.
|
|
*/
|
|
export function HomeStatsStrip() {
|
|
return (
|
|
<Box bg="graphite-black" borderBottom borderTop borderColor="border-gray/30" py={0}>
|
|
<Container>
|
|
<Box display="grid" gridCols={{ base: 2, md: 4 }} gap={0} borderLeft borderRight borderColor="border-gray/30">
|
|
<MetricCard
|
|
label="Active Drivers"
|
|
value="1,284"
|
|
icon={Users}
|
|
trend={{ value: 12, isPositive: true }}
|
|
border={false}
|
|
bg="transparent"
|
|
/>
|
|
<Box borderLeft borderColor="border-gray/30">
|
|
<MetricCard
|
|
label="Live Sessions"
|
|
value="42"
|
|
icon={Activity}
|
|
color="text-telemetry-aqua"
|
|
border={false}
|
|
bg="transparent"
|
|
/>
|
|
</Box>
|
|
<Box borderLeft borderColor="border-gray/30">
|
|
<MetricCard
|
|
label="Total Races"
|
|
value="15,402"
|
|
icon={Trophy}
|
|
color="text-warning-amber"
|
|
border={false}
|
|
bg="transparent"
|
|
/>
|
|
</Box>
|
|
<Box borderLeft borderColor="border-gray/30">
|
|
<MetricCard
|
|
label="Next Event"
|
|
value="14:00"
|
|
icon={Calendar}
|
|
border={false}
|
|
bg="transparent"
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
}
|