تطبيق تعدين العملات الرقمية

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

const App = () => {
  const [stage, setStage] = useState(1);
  const [count, setCount] = useState(0);
  const [mining, setMining] = useState(false);
  const [completedStages, setCompletedStages] = useState([]);

  const handleVoice = () => {
    setMining(true);
    const recognition = new window.webkitSpeechRecognition();
    recognition.lang = 'ar-SA';
    recognition.onresult = (event) => {
      const transcript = event.results[0][0].transcript;
      if (transcript.includes('استغفر الله')) {
        setCount(count + 1);
      }
      if (transcript.includes('لا اله الا الله وحده لا شريك له له الملك وله الحمد وهو على كل شيء قدير')) {
        if (count >= 313 && stage === 1) {
          setStage(2);
          setCount(0);
          setCompletedStages([...completedStages, 'مسلم']);
        }
      }
      if (transcript.includes('سبوح قدوس رب الملائكة والروح')) {
        if (count >= 1000 && stage === 2) {
          setStage(3);
          setCount(0);
          setCompletedStages([...completedStages, 'المؤمنون']);
        }
      }
      if (transcript.includes('لا اله الا انت سبحانك اني كنت من الظالمين')) {
        if (count >= 3000 && stage === 3) {
          setStage(4);
          setCount(0);
          setCompletedStages([...completedStages, 'المطهرون']);
        }
      }
      if (transcript.includes('اللهم فاطر السموات والأرض عالم الغيب والشهادة انت تحكم بين عبادك فيما كانوا فيه يختلفون')) {
        if (count >= 6000 && stage === 4) {
          setStage(5);
          setCount(0);
          setCompletedStages([...completedStages, 'المتقون']);
        }
      }
      if (transcript.includes('لا اله الا انت الاحد الصمد')) {
        if (count >= 9000 && stage === 5) {
          setCompletedStages([...completedStages, 'المحسنون']);
        }
      }
      if (transcript.includes('الله اكبر')) {
        // Handle Zakat and Sadaqah logic here
      }
    };
    recognition.start();
  };

  return (
    <div className="App">
      <h1 className="text-4xl font-bold text-center text-blue-600 mt-10">Digital Currency Mining</h1>
      <div className="flex flex-col items-center mt-10">
        <h2 className="text-2xl font-semibold text-gray-800">Stage {stage}</h2>
        <p className="text-lg text-gray-600">Count: {count}</p>
        <button
          onClick={handleVoice}
          className="mt-5 px-6 py-3 bg-blue-500 text-white font-bold rounded-full hover:bg-blue-700 transition duration-300"
        >
          Start Mining
        </button>
        <div className="mt-10">
          <h3 className="text-xl font-semibold text-gray-800">Completed Stages:</h3>
          <ul className="list-disc list-inside">
            {completedStages.map((stage, index) => (
              <li key={index} className="text-gray-600">{stage}</li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
};

export default App;