feat: solution for 'сырой текст задания → плоская карточка'

untitled-task/src/components/Login.js

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import './Login.css';
+
+function Login() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const navigate = useNavigate();
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Placeholder for authentication logic
+    console.log('Email:', email);
+    console.log('Password:', password);
+    // After successful login, navigate to a protected route or dashboard
+    // navigate('/dashboard');
+  };
+
+  return (
+    <div className="login-container">
+      <h2>Login</h2>
+      <form onSubmit={handleSubmit} className="login-form">
+        <label>
+          Email:
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+        </label>
+
+        <label>
+          Password:
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+        </label>
+
+        <button type="submit">Login</button>
+      </form>
+
+      <div className="login-links">
+        <Link to="/forgot-password">Forgot password?</Link>
+        <span> | </span>
+        <Link to="/register">Register</Link>
+      </div>
+    </div>
+  );
+}
+
+export default Login;