Email Confirmation - Copy this React, Tailwind Component to your project

Redesign this pageimport React, { useEffect, useState } from 'react'; import { useParams, useNavigate } from 'react router dom'; import { confirmEmail } from '../../services/api'; import { Spinner, Button } from 'react bootstrap'; import './EmailConfirmation.css'; const EmailConfirmation = () => { const { token } = useParams(); const [message, setMessage] = useState(''); const [loading, setLoading] = useState(true); const [error, setError] = useState(false); const navigate = useNavigate(); // Sử dụng useNavigate để điều hướng useEffect(() => { const verifyEmail = async () => { try { const response = await confirmEmail(token); setMessage(response.data.message); setError(false); } catch (error) { setMessage('Email confirmation failed. Please try again.'); setError(true); } finally { setLoading(false); } }; verifyEmail(); }, [token]); const handleGoBack = () => { navigate('/login'); // Điều hướng về trang login }; return ( <div className="email confirmation container"> <div className="email confirmation card"> <h2 className="email confirmation title">Email Confirmation</h2> {loading ? ( <div className="email confirmation spinner"> <Spinner animation="border" variant="primary" /> <p>Verifying your email, please wait...</p> </div> ) : ( <> <p className={error ? "email confirmation error" : "email confirmation success"}>{message}</p> {/* Thêm nút bấm quay lại trang login */} <Button variant="primary" onClick={handleGoBack}> Quay lại đăng nhập </Button> </> )} </div> </div> ); }; export default EmailConfirmation;