207 lines
8.3 KiB
TypeScript
207 lines
8.3 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
export default function InteractiveLapSection() {
|
|
const [activeTab, setActiveTab] = useState<'lap7' | 'lap6' | 'delta'>('lap7');
|
|
|
|
return (
|
|
<section className="lap-section-wrapper">
|
|
<div className="flagship-container">
|
|
<div className="lap-grid">
|
|
{/* Left Column: Sector Delta Details */}
|
|
<div className="lap-left-col">
|
|
<div className="font-label-caps text-green-accent pill-label bg-surface-container w-fit">
|
|
SECTOR TELEMETRY BREAKDOWN
|
|
</div>
|
|
<h2 className="font-headline-xl text-ink m-0">
|
|
Analyze lap deltas with surgical telemetry.
|
|
</h2>
|
|
<p className="font-body-md m-0">
|
|
Compare throttle traces, brake initiation thresholds, and roll angles between your best lap and
|
|
reference benchmarks. Instantly see where you left tenths on the tarmac.
|
|
</p>
|
|
|
|
{/* Lap Tab Controls */}
|
|
<div className="lap-tabs">
|
|
<button
|
|
type="button"
|
|
className={`lap-tab-btn ${activeTab === 'lap7' ? 'active' : ''}`}
|
|
onClick={() => setActiveTab('lap7')}
|
|
>
|
|
Lap 7 (1:34.28)
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`lap-tab-btn ${activeTab === 'lap6' ? 'active' : ''}`}
|
|
onClick={() => setActiveTab('lap6')}
|
|
>
|
|
Lap 6 (1:34.70)
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`lap-tab-btn ${activeTab === 'delta' ? 'active' : ''}`}
|
|
onClick={() => setActiveTab('delta')}
|
|
>
|
|
Session Delta
|
|
</button>
|
|
</div>
|
|
|
|
{/* Sector Performance List */}
|
|
<div className="sector-list">
|
|
<div className="sector-row">
|
|
<div className="sector-info">
|
|
<span className="sector-dot bg-green-accent" />
|
|
<div>
|
|
<span className="font-headline-sm text-ink block">
|
|
Sector 1: Turn 1-4 Complex
|
|
</span>
|
|
<span className="font-body-sm">Brake marker +8m deeper</span>
|
|
</div>
|
|
</div>
|
|
<span className="font-code-mono text-green-accent font-semibold text-[17px]">
|
|
-0.21s
|
|
</span>
|
|
</div>
|
|
|
|
<div className="sector-row">
|
|
<div className="sector-info">
|
|
<span className="sector-dot bg-cyan-accent" />
|
|
<div>
|
|
<span className="font-headline-sm text-ink block">
|
|
Sector 2: Main Straightaway
|
|
</span>
|
|
<span className="font-body-sm">Top exit speed 162.4 MPH</span>
|
|
</div>
|
|
</div>
|
|
<span className="font-code-mono text-cyan-accent font-semibold text-[17px]">
|
|
-0.14s
|
|
</span>
|
|
</div>
|
|
|
|
<div className="sector-row">
|
|
<div className="sector-info">
|
|
<span className="sector-dot bg-blue-accent" />
|
|
<div>
|
|
<span className="font-headline-sm text-ink block">
|
|
Sector 3: The Carousel
|
|
</span>
|
|
<span className="font-body-sm">Consistent 52° lean sustained</span>
|
|
</div>
|
|
</div>
|
|
<span className="font-code-mono text-blue-accent font-semibold text-[17px]">
|
|
-0.07s
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column: Telemetry Graph & SVG Trace */}
|
|
<div className="graph-card">
|
|
<div className="graph-header">
|
|
<div className="graph-header-left">
|
|
<span className="font-headline-sm text-ink">
|
|
Laguna Seca Circuit
|
|
</span>
|
|
<span className="font-code-mono graph-badge text-dim-cyan bg-surface-highest">
|
|
DRY • 24°C
|
|
</span>
|
|
</div>
|
|
<div className="font-code-mono text-green-accent flex items-center gap-6px">
|
|
<span className="sector-dot-small bg-green-accent" />
|
|
DELTA: {activeTab === 'lap7' ? '-0.42s' : activeTab === 'lap6' ? '+0.12s' : '-0.533s'}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Inline SVG Wave Graph */}
|
|
<div className="graph-svg-container bg-surface-lowest">
|
|
<div className="graph-svg-header font-code-mono text-xs">
|
|
<span className="text-muted">SPEED (MPH) & THROTTLE %</span>
|
|
<span className="text-cyan-accent text-[11px] sm:text-xs">BLUE: SPEED | GREEN: THROTTLE</span>
|
|
</div>
|
|
|
|
<svg
|
|
className="w-full h-[176px]"
|
|
fill="none"
|
|
viewBox="0 0 600 160"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
role="img"
|
|
aria-label="Speed and throttle telemetry traces"
|
|
>
|
|
<defs>
|
|
<linearGradient id="speedGrad" x1="0" x2="0" y1="0" y2="1">
|
|
<stop offset="0%" stopColor="#00f2fe" stopOpacity="0.35" />
|
|
<stop offset="100%" stopColor="#00f2fe" stopOpacity="0.0" />
|
|
</linearGradient>
|
|
</defs>
|
|
{/* Horizontal grid lines */}
|
|
<line stroke="#3a494b" strokeDasharray="4 4" strokeOpacity="0.3" x1="0" x2="600" y1="40" y2="40" />
|
|
<line stroke="#3a494b" strokeDasharray="4 4" strokeOpacity="0.3" x1="0" x2="600" y1="80" y2="80" />
|
|
<line stroke="#3a494b" strokeDasharray="4 4" strokeOpacity="0.3" x1="0" x2="600" y1="120" y2="120" />
|
|
|
|
{/* Speed Area and Line */}
|
|
<path
|
|
d="M0,130 Q60,110 120,45 T240,90 T360,30 T480,80 T600,20 L600,160 L0,160 Z"
|
|
fill="url(#speedGrad)"
|
|
/>
|
|
<path
|
|
d="M0,130 Q60,110 120,45 T240,90 T360,30 T480,80 T600,20"
|
|
stroke="#00f2fe"
|
|
strokeLinecap="round"
|
|
strokeWidth="3"
|
|
/>
|
|
|
|
{/* Throttle Trace Line */}
|
|
<path
|
|
d="M0,150 Q70,140 120,25 T240,110 T360,15 T480,105 T600,10"
|
|
stroke="#34ff8c"
|
|
strokeDasharray="3 3"
|
|
strokeWidth="2.5"
|
|
/>
|
|
|
|
{/* Apex Marker */}
|
|
<circle cx="360" cy="30" fill="#00f2fe" r="5" stroke="#ffffff" strokeWidth="2" />
|
|
</svg>
|
|
|
|
<div className="graph-svg-footer font-code-mono text-muted text-[11px]">
|
|
<span className="truncate">T1 (Andretti)</span>
|
|
<span className="shrink-0">T6</span>
|
|
<span className="truncate">Corkscrew (Apex)</span>
|
|
<span className="shrink-0">T11</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Mini Readouts */}
|
|
<div className="bento-stats-grid-3 mt-3">
|
|
<div className="bento-stat-box text-center bg-surface-container">
|
|
<span className="font-label-caps text-muted block">
|
|
PEAK DECEL
|
|
</span>
|
|
<span className="font-headline-sm text-danger-accent block mt-2px">
|
|
-1.42 G
|
|
</span>
|
|
</div>
|
|
<div className="bento-stat-box text-center bg-surface-container">
|
|
<span className="font-label-caps text-muted block">
|
|
ROLL RATE
|
|
</span>
|
|
<span className="font-headline-sm text-cyan-accent block mt-2px">
|
|
64°/s
|
|
</span>
|
|
</div>
|
|
<div className="bento-stat-box text-center bg-surface-container">
|
|
<span className="font-label-caps text-muted block">
|
|
DISTANCE
|
|
</span>
|
|
<span className="font-headline-sm text-ink block mt-2px">
|
|
2.238 MI
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|