تطبيق مكعبات روبيك شامل

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

const App = () => {
  const [selectedCube, setSelectedCube] = useState('3x3');
  const cubes = ['2x2', '3x3', '4x4', '5x5', '6x6', '7x7'];

  const renderCubeControls = () => {
    return cubes.map(cube => (
      <button
        key={cube}
        className={`p-4 m-2 rounded-lg transition-all duration-300 ${selectedCube === cube ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-700'}`}
        onClick={() => setSelectedCube(cube)}
      >
        {cube}
      </button>
    ));
  };

  const renderCube = () => {
    const size = selectedCube.split('x')[0];
    const gridSize = parseInt(size);
    const cubeSize = `w-${gridSize * 10} h-${gridSize * 10}`;

    return (
      <div className={`grid grid-cols-${gridSize} gap-1 ${cubeSize} bg-gray-800 p-1 rounded-lg`}>
        {Array.from({ length: gridSize * gridSize }).map((_, index) => (
          <div key={index} className='bg-white rounded-sm'></div>
        ))}
      </div>
    );
  };

  return (
    <div className='App min-h-screen bg-gray-100 flex flex-col items-center justify-center p-4'>
      <h1 className='text-4xl font-bold mb-8 text-gray-800'>Rubik's Cube Simulator</h1>
      <div className='flex flex-wrap justify-center mb-8'>
        {renderCubeControls()}
      </div>
      <div className='flex justify-center'>
        {renderCube()}
      </div>
      <footer className='mt-8 text-gray-600'>
        © 2025 Rubik's Cube Simulator. All rights reserved.
      </footer>
    </div>
  );
};

export default App;