إنشاء لعبة أسئلة

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

const App = () => {
  const [showCategories, setShowCategories] = useState(false);
  const [selectedCategories, setSelectedCategories] = useState([]);
  const [questions, setQuestions] = useState([]);

  const categories = [
    { id: 1, name: 'Science' },
    { id: 2, name: 'History' },
    { id: 3, name: 'Geography' },
    { id: 4, name: 'Math' },
    { id: 5, name: 'Literature' }
  ];

  const handleCreateGame = () => {
    setShowCategories(true);
  };

  const handleCategorySelect = (category) => {
    if (selectedCategories.includes(category)) {
      setSelectedCategories(selectedCategories.filter(cat => cat !== category));
    } else {
      setSelectedCategories([...selectedCategories, category]);
    }
  };

  const handleStartGame = () => {
    const selectedQuestions = selectedCategories.map(category => ({
      category,
      question: `Sample question for ${category}`
    }));
    setQuestions(selectedQuestions);
  };

  return (
    <div className="App bg-gray-100 min-h-screen p-8">
      <h1 className="text-4xl font-bold text-center mb-8">Game App</h1>
      {!showCategories ? (
        <button
          className="bg-yellow-500 text-black font-cairo text-2xl px-6 py-3 rounded-lg shadow-lg hover:bg-yellow-600 transition duration-300"
          onClick={handleCreateGame}
        >
          Create Game
        </button>
      ) : (
        <div className="max-w-2xl mx-auto">
          <h2 className="text-2xl font-bold mb-4">Select Categories</h2>
          <div className="grid grid-cols-2 gap-4">
            {categories.map(category => (
              <div
                key={category.id}
                className={`p-4 rounded-lg cursor-pointer transition duration-300 ${selectedCategories.includes(category.name) ? 'bg-blue-500 text-white' : 'bg-white text-black hover:bg-gray-200'}`}
                onClick={() => handleCategorySelect(category.name)}
              >
                {category.name}
              </div>
            ))}
          </div>
          <button
            className="mt-6 bg-green-500 text-white font-cairo text-2xl px-6 py-3 rounded-lg shadow-lg hover:bg-green-600 transition duration-300"
            onClick={handleStartGame}
          >
            Start Game
          </button>
        </div>
      )}
      {questions.length > 0 && (
        <div className="mt-8">
          <h2 className="text-2xl font-bold mb-4">Questions</h2>
          <div className="space-y-4">
            {questions.map((q, index) => (
              <div key={index} className="bg-white p-4 rounded-lg shadow-lg">
                <p className="text-lg font-semibold">{q.question}</p>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default App;