97 lines
3.1 KiB
TypeScript
97 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
|
|
export default function TelemetryStrip() {
|
|
const [riderCount, setRiderCount] = useState(14820);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
if (Math.random() > 0.4) {
|
|
setRiderCount((prev) => prev + Math.floor(Math.random() * 3));
|
|
}
|
|
}, 3200);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return (
|
|
<section className="telemetry-strip">
|
|
<div className="flagship-container">
|
|
<div className="metric-strip-grid">
|
|
<div className="metric-box">
|
|
<div className="metric-box-header">
|
|
<span className="font-label-caps text-muted">
|
|
ACTIVE NETWORK
|
|
</span>
|
|
<span className="material-symbols-outlined text-dim-green icon-md">
|
|
hub
|
|
</span>
|
|
</div>
|
|
<div className="metric-box-content">
|
|
<div className="font-telemetry-metric-xl text-ink">
|
|
{riderCount.toLocaleString()}+
|
|
</div>
|
|
<p className="font-body-sm metric-box-desc">
|
|
Connected Live Riders
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="metric-box">
|
|
<div className="metric-box-header">
|
|
<span className="font-label-caps text-muted">
|
|
DATABASE DEPTH
|
|
</span>
|
|
<span className="material-symbols-outlined text-cyan-accent icon-md">
|
|
route
|
|
</span>
|
|
</div>
|
|
<div className="metric-box-content">
|
|
<div className="font-telemetry-metric-xl text-ink">
|
|
3.2M+
|
|
</div>
|
|
<p className="font-body-sm metric-box-desc">
|
|
Track Miles Analyzed
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="metric-box">
|
|
<div className="metric-box-header">
|
|
<span className="font-label-caps text-muted">
|
|
PEAK DYNAMICS
|
|
</span>
|
|
<span className="material-symbols-outlined text-blue-accent icon-md">
|
|
airline_stops
|
|
</span>
|
|
</div>
|
|
<div className="metric-box-content">
|
|
<div className="font-telemetry-metric-xl text-cyan-accent">58°</div>
|
|
<p className="font-body-sm metric-box-desc">
|
|
Max Recorded Lean Angle
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="metric-box">
|
|
<div className="metric-box-header">
|
|
<span className="font-label-caps text-muted">
|
|
HARDWARE SAMPLING
|
|
</span>
|
|
<span className="material-symbols-outlined text-green-accent icon-md">
|
|
timer
|
|
</span>
|
|
</div>
|
|
<div className="metric-box-content">
|
|
<div className="font-telemetry-metric-xl text-green-accent">0.01s</div>
|
|
<p className="font-body-sm metric-box-desc">
|
|
Telemetry Precision Sync
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|