Customer Management System - Copy this React, Tailwind Component to your project

'use client'; import { signIn } from 'next-auth/react'; import { useState } from 'react'; import { useRouter } from 'next/navigation'; export default function Login() { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); const router = useRouter(); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setError(''); const result = await signIn('credentials', { username, password, redirect: false, }); if (result?.error) { setError('Invalid username or password'); } else { router.push('/'); } }; return ( <div className="flex items-center justify-center min-h-screen bg-blue-50"> <div className="px-8 py-6 mt-4 text-left bg-white shadow-lg rounded-lg"> <h3 className="text-2xl font-bold text-center text-blue-600">Đăng nhập vào tài khoản của bạn</h3> {error && <p className="text-red-500 text-center mt-2">{error}</p>} <form onSubmit={handleSubmit} className="mt-4"> <div> <label className="block text-gray-700" htmlFor="username">Tên đăng nhập</label> <input type="text" placeholder="Tên đăng nhập" className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600" value={username} onChange={(e) => setUsername(e.target.value)} required /> </div> <div className="mt-4"> <label className="block text-gray-700" htmlFor="password">Mật khẩu</label> <input type="password" placeholder="Mật khẩu" className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600" value={password} onChange={(e) => setPassword(e.target.value)} required /> </div> <div className="flex items-baseline justify-between"> <button className="px-6 py-2 mt-4 text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors">Đăng nhập</button> </div> </form> </div> </div> ); } this is my code update for me