Олтин койда ҳисобловчи

import React, { useState } from 'react';
import './App.css';

function App() {
  const [inputValue, setInputValue] = useState('');
  const [phi, setPhi] = useState(null);
  const [goldenMultiplied, setGoldenMultiplied] = useState(null);
  const [goldenDivided, setGoldenDivided] = useState(null);
  const [error, setError] = useState('');

  const calculateGoldenRatios = (x) => {
    const phiValue = (1 + Math.sqrt(5)) / 2;
    const multiplied = x * phiValue;
    const divided = x / phiValue;
    return { phiValue, multiplied, divided };
  };

  const handleCalculate = () => {
    try {
      const x = parseFloat(inputValue);
      if (isNaN(x)) {
        setError('Please enter a valid number!');
        return;
      }
      const { phiValue, multiplied, divided } = calculateGoldenRatios(x);
      setPhi(phiValue);
      setGoldenMultiplied(multiplied);
      setGoldenDivided(divided);
      setError('');
    } catch (err) {
      setError('Please enter a valid number!');
    }
  };

  return (
    <div className="App bg-gray-100 min-h-screen p-10">
      <div className="max-w-4xl mx-auto bg-white p-8 rounded-lg shadow-lg">
        <h1 className="text-4xl font-bold text-center mb-6 text-blue-600">🌟 Golden Ratio Calculator 🌟</h1>
        <div className="mb-6">
          <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="inputValue">
            Enter a number (e.g., 5, 10.5, 100):
          </label>
          <input
            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
            id="inputValue"
            type="text"
            placeholder="Enter a number"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
          />
        </div>
        {error && <p className="text-red-500 text-xs italic mb-4">{error}</p>}
        <div className="flex justify-center">
          <button
            className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
            onClick={handleCalculate}
          >
            Calculate
          </button>
        </div>
        {phi && (
          <div className="mt-8 space-y-4">
            <p className="text-gray-700">
              <span className="font-semibold">Golden Ratio (φ):</span> {phi.toFixed(15)}
            </p>
            <p className="text-gray-700">
              <span className="font-semibold">✅ {inputValue} × φ =</span> {goldenMultiplied.toFixed(15)}
            </p>
            <p className="text-gray-700">
              <span className="font-semibold">✅ {inputValue} ÷ φ =</span> {goldenDivided.toFixed(15)}
            </p>
          </div>
        )}
      </div>
    </div>
  );
}

export default App;