"use client"; import { useState, useRef, useEffect, type ReactElement } from "react"; import { motion, AnimatePresence, useReducedMotion } from "motion/react"; import Link from "next/link"; import { BENCHMARK_CONTROL_COLOR, BENCHMARK_TREATMENT_COLOR, BENCHMARK_TOOLTIP_CONTROL_SECONDS, BENCHMARK_TOOLTIP_TREATMENT_SECONDS, BENCHMARK_TOOLTIP_MAX_SECONDS, BENCHMARK_TOOLTIP_SPEEDUP_FACTOR, TOOLTIP_HOVER_DELAY_MS, } from "@/constants"; interface BenchmarkTooltipProps { href: string; children: React.ReactNode; className?: string; } interface MiniBarProps { targetSeconds: number; maxSeconds: number; color: string; label: string; isAnimating: boolean; shouldReduceMotion?: boolean; } const MiniBar = ({ targetSeconds, maxSeconds, color, label, isAnimating, shouldReduceMotion = false, }: MiniBarProps): ReactElement => { const targetWidth = (targetSeconds / maxSeconds) * 100; return (

{label}

); }; MiniBar.displayName = "MiniBar"; interface MiniChartProps { isVisible: boolean; shouldReduceMotion?: boolean; } const MiniChart = ({ isVisible, shouldReduceMotion = false, }: MiniChartProps): ReactElement => { const gridLines = [0, 5, 10, 15, 20]; return (

{gridLines.map((seconds) => (

))}

Claude Code

+ React Grab

{BENCHMARK_TOOLTIP_TREATMENT_SECONDS}s {BENCHMARK_TOOLTIP_SPEEDUP_FACTOR}× faster

{gridLines.map((seconds) => ( {seconds}s ))}

); }; MiniChart.displayName = "MiniChart"; export const BenchmarkTooltip = ({ href, children, className, }: BenchmarkTooltipProps): ReactElement => { const shouldReduceMotion = Boolean(useReducedMotion()); const [isHovered, setIsHovered] = useState(false); const [isVisible, setIsVisible] = useState(false); const timeoutRef = useRef(null); const handleMouseEnter = () => { timeoutRef.current = setTimeout(() => { setIsHovered(true); setIsVisible(true); }, TOOLTIP_HOVER_DELAY_MS); }; const handleMouseLeave = () => { if (timeoutRef.current) { clearTimeout(timeoutRef.current); } setIsHovered(false); setIsVisible(false); }; useEffect(() => { return () => { if (timeoutRef.current) { clearTimeout(timeoutRef.current); } }; }, []); return ( {children} {isHovered && (

)} ); }; BenchmarkTooltip.displayName = "BenchmarkTooltip";