Build Apps with Claude 4 Sonnet

import { useState, useRef, useCallback } from "react"

function Stopwatch() {
  const [elapsed, setElapsed] = useState(0)
  const [laps, setLaps] = useState<number[]>([])
  const [running, setRunning] = useState(false)
  const intervalRef = useRef<ReturnType<typeof setInterval>>(null)
  const startTimeRef = useRef(0)

  const start = useCallback(() => {
    startTimeRef.current = Date.now() - elapsed
    intervalRef.current = setInterval(() => {
      setElapsed(Date.now() - startTimeRef.current)
    }, 10)
    setRunning(true)
  }, [elapsed])

  const stop = useCallback(() => {
    if (intervalRef.current) clearInterval(intervalRef.current)
    setRunning(false)
  }, [])

  const lap = useCallback(() => setLaps(prev => [elapsed, ...prev]), [elapsed])
  const reset = useCallback(() => {
    stop()
    setElapsed(0)
    setLaps([])
  }, [stop])

  const fmt = (ms: number) => {
    const m = Math.floor(ms / 60000)
    const s = Math.floor((ms % 60000) / 1000)
    const cs = Math.floor((ms % 1000) / 10)
    return `${String(m).padStart(2,"0")}:${String(s).padStart(2,"0")}.${String(cs).padStart(2,"0")}`
  }

  return (
    <div className="max-w-xs mx-auto p-6 text-center">
      <p className="text-5xl font-mono mb-6">{fmt(elapsed)}</p>
      <div className="flex gap-2 justify-center mb-4">
        {running ? (
          <>
            <button onClick={stop} className="px-5 py-2 bg-red-500 text-white rounded-full">Stop</button>
            <button onClick={lap} className="px-5 py-2 bg-gray-200 rounded-full">Lap</button>
          </>
        ) : (
          <>
            <button onClick={start} className="px-5 py-2 bg-green-500 text-white rounded-full">Start</button>
            {elapsed > 0 && <button onClick={reset} className="px-5 py-2 bg-gray-200 rounded-full">Reset</button>}
          </>
        )}
      </div>
      {laps.length > 0 && (
        <ul className="text-left border-t pt-3 space-y-1">
          {laps.map((t, i) => (
            <li key={i} className="flex justify-between text-sm py-1 border-b">
              <span className="text-gray-500">Lap {laps.length - i}</span>
              <span className="font-mono">{fmt(t)}</span>
            </li>
          ))}
        </ul>
      )}
    </div>
  )
}