Build Apps with Ollama (Local)

import { useState } from "react"

function TipCalculator() {
  const [bill, setBill] = useState("")
  const [tipPct, setTipPct] = useState(15)

  const billNum = parseFloat(bill) || 0
  const tip = billNum * tipPct / 100
  const total = billNum + tip

  return (
    <div className="max-w-xs mx-auto p-6 space-y-4">
      <input type="number" placeholder="Bill amount"
        value={bill} onChange={e => setBill(e.target.value)}
        className="w-full border rounded px-3 py-2 text-lg" />
      <div className="flex gap-2">
        {[10, 15, 20, 25].map(pct => (
          <button key={pct}
            onClick={() => setTipPct(pct)}
            className={`flex-1 py-2 rounded ${
              tipPct === pct ? "bg-blue-600 text-white" : "bg-gray-100"
            }`}>
            {pct}%
          </button>
        ))}
      </div>
      <div className="bg-gray-50 rounded-lg p-4 space-y-2">
        <div className="flex justify-between">
          <span>Tip</span>
          <span>${tip.toFixed(2)}</span>
        </div>
        <div className="flex justify-between font-bold text-lg">
          <span>Total</span>
          <span>${total.toFixed(2)}</span>
        </div>
      </div>
    </div>
  )
}