Build Apps with Gemini Pro

import { useState } from "react"

function BMICalculator() {
  const [height, setHeight] = useState("")
  const [weight, setWeight] = useState("")

  const bmi = height && weight
    ? (parseFloat(weight) / (parseFloat(height) / 100) ** 2).toFixed(1)
    : null

  const getCategory = (bmi: number) => {
    if (bmi < 18.5) return { label: "Underweight", color: "text-blue-500" }
    if (bmi < 25) return { label: "Normal", color: "text-green-500" }
    if (bmi < 30) return { label: "Overweight", color: "text-yellow-500" }
    return { label: "Obese", color: "text-red-500" }
  }

  return (
    <div className="max-w-sm mx-auto p-6 space-y-4">
      <h2 className="text-xl font-bold">BMI Calculator</h2>
      <input type="number" placeholder="Height (cm)"
        value={height} onChange={e => setHeight(e.target.value)}
        className="w-full border rounded px-3 py-2" />
      <input type="number" placeholder="Weight (kg)"
        value={weight} onChange={e => setWeight(e.target.value)}
        className="w-full border rounded px-3 py-2" />
      {bmi && !isNaN(parseFloat(bmi)) && (
        <div className="text-center p-4 bg-gray-50 rounded-lg">
          <p className="text-3xl font-bold">{bmi}</p>
          <p className={`font-medium ${getCategory(parseFloat(bmi)).color}`}>
            {getCategory(parseFloat(bmi)).label}
          </p>
        </div>
      )}
    </div>
  )
}