Untitled

import React, { useState } from 'react'
import { NavLink } from 'react-router-dom';

const SignupSeller = () => {
  const [credentials, setCredentials] = useState({
    name:"",
    email: "",
    number: "",
    password: "",
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setCredentials({ ...credentials, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // console.log("Login attempt:", credentials);
    alert(`Signing up with:\nEmail: ${credentials.email}\nPassword: ${credentials.password}`);
    setCredentials({ email: "", password: "" , name:"", number: ""});
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-green-900">
      <div className="bg-white p-8 rounded-lg shadow-xl w-full max-w-md">
        <h2 className="text-2xl text-green-900 font-bold mb-8 text-center">ARANYA</h2>
        <h2 className="text-2xl text-green-900 font-bold mb-3 text-center">WELCOME TO ARANYA!</h2>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm text-green-900 font-medium pt-6 mb-1">Name</label>
            <input
              type="text"
              name="name"
              value={credentials.name}
              onChange={handleChange}
              placeholder="Enter your name"
              required
              className="w-full border border-gray-300 px-3 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-green-700"
            />
          </div>
          <div>
            <label className="block text-green-900 text-sm font-medium pt-2 mb-1">Email</label>
            <input
              type="email"
              name="email"
              value={credentials.email}
              onChange={handleChange}
              placeholder="Enter your email"
              required
              className="w-full border border-gray-300 px-3 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-green-700"
            />
          </div>
          <div>
            <label className="block text-green-900 text-sm font-medium pt-2 mb-1">Aadhar Card Number</label>
            <input
              type="number"
              name="number"
              value={credentials.number}
              onChange={handleChange}
              placeholder="Enter your aadhar card number"
              required
              className="w-full border border-gray-300 px-3 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-green-700"
            />
          </div>
          <div>
            <label className="block text-green-900 text-sm font-medium pt-2 mb-1">Create password</label>
            <input
              type="password"
              name="password"
              value={credentials.password}
              onChange={handleChange}
              placeholder="Enter your password"
              required
              className="w-full border border-gray-300 px-3 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-green-700"
            />
          </div>
          <button
            type="submit"
            className="w-full mt-10 bg-green-600 text-white py-2 mb-4 rounded-md hover:bg-green-900 cursor-pointer transition"
          >Sign up
          </button>
        </form>
        {/* <p className="text-sm text-gray-500 mt-4 text-center">
          Don't have an account? <NavLink to="/signup"><span className="text-green-700 cursor-pointer">Sign up</span></NavLink>
        </p> */}
      </div>
    </div>
  );
};

export default SignupSeller