Create AuthForm.jsx

AuthForm.jsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+
+const AuthForm = ({ type = "login" }) => {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [msg, setMsg] = useState('');
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const endpoint = type === 'signup' ? '/signup' : '/login';
+      const res = await axios.post(`https://your-hf-space.hf.space${endpoint}`, {
+        username,
+        password,
+      });
+      if (type === 'login') {
+        localStorage.setItem('token', res.data.token);
+        window.location.href = "/search";
+      } else {
+        setMsg("Account created! You can now login.");
+      }
+    } catch (err) {
+      setMsg(err.response?.data?.message || 'Something went wrong');
+    }
+  };
+
+  return (
+    <div className="max-w-md mx-auto p-6 bg-white rounded-2xl shadow-lg">
+      <h2 className="text-2xl font-bold mb-4">{type === 'signup' ? 'Sign Up' : 'Login'}</h2>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <input type="text" placeholder="Username"
+          className="w-full px-4 py-2 border rounded-lg"
+          value={username} onChange={e => setUsername(e.target.value)} required />
+        <input type="password" placeholder="Password"
+          className="w-full px-4 py-2 border rounded-lg"
+          value={password} onChange={e => setPassword(e.target.value)} required />
+        <button className="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700">
+          {type === 'signup' ? 'Sign Up' : 'Login'}
+        </button>
+        {msg && <p className="text-red-500">{msg}</p>}
+      </form>
+    </div>
+  );
+};
+
+export default AuthForm;