تصميم صفحات تسجيل الدخول

import React, { useState } from 'react';
r export default function App() {
  const [isLogin, setIsLogin] = useState(true);

  const handleSwitch = () => {
    setIsLogin(!isLogin);
  };

  return (
    <div className='min-h-screen bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center'>
      <div className='bg-white p-8 rounded-lg shadow-2xl w-96'>
        <h1 className='text-3xl font-bold mb-6 text-center'>{isLogin ? 'Login' : 'Sign Up'}</h1>
        <form className='space-y-4'>
          <div>
            <label className='block text-sm font-medium text-gray-700'>Email</label>
            <input type='email' className='mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500' required />
          </div>
          <div>
            <label className='block text-sm font-medium text-gray-700'>Password</label>
            <input type='password' className='mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500' required />
          </div>
          {!isLogin && (
            <div>
              <label className='block text-sm font-medium text-gray-700'>Confirm Password</label>
              <input type='password' className='mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500' required />
            </div>
          )}
          <div>
            <button type='submit' className='w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'>
              {isLogin ? 'Login' : 'Sign Up'}
            </button>
          </div>
        </form>
        <div className='mt-4 text-center'>
          <button onClick={handleSwitch} className='text-sm text-indigo-600 hover:text-indigo-500'>
            {isLogin ? 'Create an account' : 'Already have an account? Login'}
          </button>
        </div>
      </div>
    </div>
  );
}