205 lines
7.9 KiB
TypeScript
205 lines
7.9 KiB
TypeScript
import React from "react";
|
|
|
|
type HUDVariant = "pace" | "power" | "interval" | "cadence";
|
|
|
|
interface HUDPreviewSVGProps {
|
|
variant?: HUDVariant;
|
|
className?: string;
|
|
}
|
|
|
|
export default function HUDPreviewSVG({
|
|
variant = "pace",
|
|
className = "",
|
|
}: HUDPreviewSVGProps) {
|
|
return (
|
|
<svg
|
|
viewBox="0 0 400 200"
|
|
className={`w-full max-w-md ${className}`}
|
|
role="img"
|
|
aria-label={`HUD preview: ${variant}`}
|
|
>
|
|
{/* Background — translucent dark panel */}
|
|
<rect
|
|
x="10"
|
|
y="10"
|
|
width="380"
|
|
height="180"
|
|
rx="16"
|
|
fill="#0a0a0a"
|
|
opacity="0.85"
|
|
/>
|
|
<rect
|
|
x="10"
|
|
y="10"
|
|
width="380"
|
|
height="180"
|
|
rx="16"
|
|
fill="none"
|
|
stroke="#38bdf8"
|
|
strokeWidth="1"
|
|
opacity="0.3"
|
|
/>
|
|
|
|
{variant === "pace" && (
|
|
<>
|
|
{/* Pace label */}
|
|
<text x="40" y="55" fill="#71717a" fontSize="11" fontFamily="monospace">
|
|
RITMO
|
|
</text>
|
|
<text x="40" y="85" fill="#fafafa" fontSize="28" fontWeight="bold" fontFamily="monospace">
|
|
4:32
|
|
</text>
|
|
<text x="130" y="85" fill="#71717a" fontSize="14" fontFamily="monospace">
|
|
/km
|
|
</text>
|
|
|
|
{/* Target */}
|
|
<text x="200" y="55" fill="#71717a" fontSize="11" fontFamily="monospace">
|
|
ALVO
|
|
</text>
|
|
<text x="200" y="85" fill="#38bdf8" fontSize="28" fontWeight="bold" fontFamily="monospace">
|
|
4:35
|
|
</text>
|
|
|
|
{/* Delta */}
|
|
<text x="310" y="55" fill="#71717a" fontSize="11" fontFamily="monospace">
|
|
DELTA
|
|
</text>
|
|
<text x="310" y="85" fill="#22c55e" fontSize="24" fontWeight="bold" fontFamily="monospace">
|
|
-3s
|
|
</text>
|
|
|
|
{/* Split bar */}
|
|
<text x="40" y="130" fill="#71717a" fontSize="11" fontFamily="monospace">
|
|
SPLIT 5km
|
|
</text>
|
|
<rect x="40" y="140" width="320" height="6" rx="3" fill="#27272a" />
|
|
<rect x="40" y="140" width="200" height="6" rx="3" fill="#38bdf8" />
|
|
|
|
{/* Time */}
|
|
<text x="40" y="175" fill="#a1a1aa" fontSize="13" fontFamily="monospace">
|
|
22:41
|
|
</text>
|
|
<text x="310" y="175" fill="#a1a1aa" fontSize="13" fontFamily="monospace">
|
|
km 5/10
|
|
</text>
|
|
</>
|
|
)}
|
|
|
|
{variant === "power" && (
|
|
<>
|
|
<text x="40" y="55" fill="#71717a" fontSize="11" fontFamily="monospace">
|
|
POTÊNCIA
|
|
</text>
|
|
<text x="40" y="85" fill="#fafafa" fontSize="28" fontWeight="bold" fontFamily="monospace">
|
|
285
|
|
</text>
|
|
<text x="110" y="85" fill="#71717a" fontSize="14" fontFamily="monospace">
|
|
W
|
|
</text>
|
|
|
|
<text x="200" y="55" fill="#71717a" fontSize="11" fontFamily="monospace">
|
|
ZONA
|
|
</text>
|
|
<rect x="200" y="65" width="60" height="24" rx="6" fill="#f59e0b" opacity="0.2" />
|
|
<text x="212" y="83" fill="#f59e0b" fontSize="14" fontWeight="bold" fontFamily="monospace">
|
|
Z4
|
|
</text>
|
|
|
|
<text x="310" y="55" fill="#71717a" fontSize="11" fontFamily="monospace">
|
|
RITMO
|
|
</text>
|
|
<text x="310" y="85" fill="#a1a1aa" fontSize="22" fontFamily="monospace">
|
|
4:28
|
|
</text>
|
|
|
|
<text x="40" y="130" fill="#71717a" fontSize="11" fontFamily="monospace">
|
|
POTÊNCIA MÉDIA
|
|
</text>
|
|
<text x="40" y="155" fill="#38bdf8" fontSize="20" fontFamily="monospace">
|
|
278 W
|
|
</text>
|
|
|
|
<text x="310" y="175" fill="#a1a1aa" fontSize="13" fontFamily="monospace">
|
|
34:12
|
|
</text>
|
|
</>
|
|
)}
|
|
|
|
{variant === "interval" && (
|
|
<>
|
|
<text x="40" y="50" fill="#f59e0b" fontSize="12" fontWeight="bold" fontFamily="monospace">
|
|
● INTERVALO 4/8
|
|
</text>
|
|
|
|
<text x="40" y="85" fill="#71717a" fontSize="11" fontFamily="monospace">
|
|
TEMPO RESTANTE
|
|
</text>
|
|
<text x="40" y="115" fill="#fafafa" fontSize="32" fontWeight="bold" fontFamily="monospace">
|
|
1:23
|
|
</text>
|
|
|
|
<text x="200" y="85" fill="#71717a" fontSize="11" fontFamily="monospace">
|
|
RITMO ATUAL
|
|
</text>
|
|
<text x="200" y="115" fill="#22c55e" fontSize="28" fontWeight="bold" fontFamily="monospace">
|
|
3:48
|
|
</text>
|
|
|
|
<text x="40" y="155" fill="#71717a" fontSize="11" fontFamily="monospace">
|
|
RECUPERAÇÃO
|
|
</text>
|
|
<text x="40" y="175" fill="#a1a1aa" fontSize="14" fontFamily="monospace">
|
|
próx: 2:00 trote
|
|
</text>
|
|
|
|
<text x="310" y="175" fill="#a1a1aa" fontSize="13" fontFamily="monospace">
|
|
HR 172
|
|
</text>
|
|
</>
|
|
)}
|
|
|
|
{variant === "cadence" && (
|
|
<>
|
|
<text x="40" y="55" fill="#71717a" fontSize="11" fontFamily="monospace">
|
|
CADÊNCIA
|
|
</text>
|
|
<text x="40" y="85" fill="#fafafa" fontSize="28" fontWeight="bold" fontFamily="monospace">
|
|
182
|
|
</text>
|
|
<text x="110" y="85" fill="#71717a" fontSize="14" fontFamily="monospace">
|
|
spm
|
|
</text>
|
|
|
|
{/* Zone indicator */}
|
|
<text x="200" y="55" fill="#71717a" fontSize="11" fontFamily="monospace">
|
|
ZONA
|
|
</text>
|
|
<rect x="200" y="65" width="60" height="24" rx="6" fill="#22c55e" opacity="0.2" />
|
|
<text x="208" y="83" fill="#22c55e" fontSize="14" fontWeight="bold" fontFamily="monospace">
|
|
IDEAL
|
|
</text>
|
|
|
|
<text x="40" y="130" fill="#71717a" fontSize="11" fontFamily="monospace">
|
|
GCT
|
|
</text>
|
|
<text x="40" y="155" fill="#a1a1aa" fontSize="18" fontFamily="monospace">
|
|
218 ms
|
|
</text>
|
|
|
|
<text x="200" y="130" fill="#71717a" fontSize="11" fontFamily="monospace">
|
|
OSCILAÇÃO
|
|
</text>
|
|
<text x="200" y="155" fill="#a1a1aa" fontSize="18" fontFamily="monospace">
|
|
7.2 cm
|
|
</text>
|
|
|
|
<text x="310" y="175" fill="#a1a1aa" fontSize="13" fontFamily="monospace">
|
|
4:32/km
|
|
</text>
|
|
</>
|
|
)}
|
|
</svg>
|
|
);
|
|
}
|