Build Apps with Claude 3.5 Sonnet

import { useState, useCallback } from "react"

type Unit = "celsius" | "fahrenheit" | "kelvin"

const conversions: Record<Unit, Record<Unit, (v: number) => number>> = {
  celsius: {
    celsius: v => v,
    fahrenheit: v => (v * 9) / 5 + 32,
    kelvin: v => v + 273.15,
  },
  fahrenheit: {
    celsius: v => ((v - 32) * 5) / 9,
    fahrenheit: v => v,
    kelvin: v => ((v - 32) * 5) / 9 + 273.15,
  },
  kelvin: {
    celsius: v => v - 273.15,
    fahrenheit: v => ((v - 273.15) * 9) / 5 + 32,
    kelvin: v => v,
  },
}

function TemperatureConverter() {
  const [value, setValue] = useState("")
  const [fromUnit, setFromUnit] = useState<Unit>("celsius")

  const convert = useCallback(
    (to: Unit) => {
      const num = parseFloat(value)
      if (isNaN(num)) return "—"
      return conversions[fromUnit][to](num).toFixed(1)
    },
    [value, fromUnit]
  )

  const units: { key: Unit; label: string; symbol: string }[] = [
    { key: "celsius", label: "Celsius", symbol: "°C" },
    { key: "fahrenheit", label: "Fahrenheit", symbol: "°F" },
    { key: "kelvin", label: "Kelvin", symbol: "K" },
  ]

  return (
    <div className="max-w-sm mx-auto p-6 space-y-4">
      <input type="number" value={value}
        onChange={e => setValue(e.target.value)}
        placeholder="Enter temperature"
        className="w-full border rounded-lg px-4 py-3 text-lg" />
      <select value={fromUnit}
        onChange={e => setFromUnit(e.target.value as Unit)}
        className="w-full border rounded-lg px-4 py-2">
        {units.map(u => (
          <option key={u.key} value={u.key}>{u.label}</option>
        ))}
      </select>
      <div className="grid gap-2">
        {units.filter(u => u.key !== fromUnit).map(u => (
          <div key={u.key}
            className="flex justify-between p-3 bg-gray-50 rounded-lg">
            <span className="text-gray-600">{u.label}</span>
            <span className="font-mono font-semibold">
              {convert(u.key)} {u.symbol}
            </span>
          </div>
        ))}
      </div>
    </div>
  )
}