Table

src/components/LoginRegister.js

@@ -0,0 +1,166 @@
+import React, { useState } from 'react';
+import Modal from 'react-modal';
+
+const RegistrationModal = ({ isOpen, onClose }) => {
+  const [name, setName] = useState('');
+  const [surname, setSurname] = useState('');
+  const [phone, setPhone] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+
+  const handleRegistration = () => {
+    // Здесь будет логика регистрации
+    console.log('Регистрация:', name, surname, phone, password);
+    onClose();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onClose}
+      style={{
+        overlay: {
+          backgroundColor: 'rgba(0, 0, 0, 0.75)',
+        },
+        content: {
+          top: '50%',
+          left: '50%',
+          right: 'auto',
+          bottom: 'auto',
+          marginRight: '-50%',
+          transform: 'translate(-50%, -50%)',
+          padding: '20px',
+          border: 'none',
+          borderRadius: '10px',
+          boxShadow: '0px 0px 10px rgba(0,0,0,0.5)',
+          backgroundColor: '#f8f8f8', // Светлый фон
+          fontFamily: 'Arial, sans-serif',
+        },
+      }}
+    >
+      <h2 style={{ color: '#333', textAlign: 'center' }}>Регистрация</h2>
+      <div style={{ marginBottom: '15px' }}>
+        <label style={{ display: 'block', marginBottom: '5px', color: '#555' }}>Имя:</label>
+        <input
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          style={{
+            width: '100%',
+            padding: '8px',
+            borderRadius: '5px',
+            border: '1px solid #ddd',
+            boxSizing: 'border-box',
+          }}
+        />
+      </div>
+      <div style={{ marginBottom: '15px' }}>
+        <label style={{ display: 'block', marginBottom: '5px', color: '#555' }}>Фамилия:</label>
+        <input
+          type="text"
+          value={surname}
+          onChange={(e) => setSurname(e.target.value)}
+          style={{
+            width: '100%',
+            padding: '8px',
+            borderRadius: '5px',
+            border: '1px solid #ddd',
+            boxSizing: 'border-box',
+          }}
+        />
+      </div>
+      <div style={{ marginBottom: '15px' }}>
+        <label style={{ display: 'block', marginBottom: '5px', color: '#555' }}>Номер телефона:</label>
+        <input
+          type="tel"
+          value={phone}
+          onChange={(e) => setPhone(e.target.value)}
+          style={{
+            width: '100%',
+            padding: '8px',
+            borderRadius: '5px',
+            border: '1px solid #ddd',
+            boxSizing: 'border-box',
+          }}
+        />
+      </div>
+      <div style={{ marginBottom: '15px' }}>
+        <label style={{ display: 'block', marginBottom: '5px', color: '#555' }}>Пароль:</label>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <input
+            type={showPassword ? 'text' : 'password'}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            style={{
+              width: '100%',
+              padding: '8px',
+              borderRadius: '5px',
+              border: '1px solid #ddd',
+              boxSizing: 'border-box',
+            }}
+          />
+          <button
+            type="button"
+            onClick={() => setShowPassword(!showPassword)}
+            style={{
+              marginLeft: '10px',
+              padding: '8px 12px',
+              border: 'none',
+              borderRadius: '5px',
+              backgroundColor: '#f0f0f0',
+              cursor: 'pointer',
+            }}
+          >
+            {showPassword ? 'Скрыть' : 'Показать'}
+          </button>
+        </div>
+      </div>
+      <div style={{ marginBottom: '15px' }}>
+        <label style={{ display: 'block', marginBottom: '5px', color: '#555' }}>Подтверждение пароля:</label>
+        <input
+          type="password"
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          style={{
+            width: '100%',
+            padding: '8px',
+            borderRadius: '5px',
+            border: '1px solid #ddd',
+            boxSizing: 'border-box',
+          }}
+        />
+      </div>
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <button
+          onClick={handleRegistration}
+          style={{
+            backgroundColor: '#5cb85c',
+            color: 'white',
+            padding: '10px 15px',
+            border: 'none',
+            borderRadius: '5px',
+            cursor: 'pointer',
+          }}
+        >
+          Зарегистрироваться
+        </button>
+        <button
+          onClick={onClose}
+          style={{
+            backgroundColor: '#d9534f',
+            color: 'white',
+            padding: '10px 15px',
+            border: 'none',
+            borderRadius: '5px',
+            cursor: 'pointer',
+          }}
+        >
+          Назад
+        </button>
+      </div>
+    </Modal>
+  );
+};
+
+export default RegistrationModal;