first commit
This commit is contained in:
204
src/components/HUDPreviewSVG.tsx
Normal file
204
src/components/HUDPreviewSVG.tsx
Normal file
@@ -0,0 +1,204 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user