Register Form - Copy this React, Tailwind Component to your project

Import { Button, Checkbox, Divider, Form, Input, Select } from "antd"; import axios from "axios"; import React, { useState } from "react"; import { FaEye, FaEyeSlash, FaGoogle } from "react icons/fa"; function RegisterPage() { const [form] = Form.useForm(); const [showPassword, setShowPassword] = useState(false); const [language, setLanguage] = useState("English"); const onFinish = async (values) => { console.log("Form submitted:", values); await axios.post("https://localhost:7178/api/Auth/login"); console.log("Login successful!"); }; const onFinishFailed = (errorInfo) => { console.log("Validation Failed:", errorInfo); }; return ( <div className="login container"> <div className="login image section"> <img src="https://images.unsplash.com/photo 1604134967494 8a9ed3adea0d?q=80&w=1974&auto=format&fit=crop&ixlib=rb 4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Healthcare" className="login image" /> <div className="image overlay"></div> </div> <div className="login form section"> <div className="form wrapper"> <h2 className="title">School Health Portal Login</h2> <p className="subtitle">Welcome back! Please enter your details</p> <Form form={form} layout="vertical" name="loginForm" initialValues={{ rememberMe: false }} onFinish={onFinish} onFinishFailed={onFinishFailed} > <Form.Item label="Username" name="email" rules={[ { required: true, message: "Phone number is required" }, { min: 4, message: "Username must be at least 6 characters" }, ]} > <Input /> </Form.Item> <Form.Item label="Password" name="password" rules={[ { required: true, message: "Password is required" }, { min: 6, message: "Password must be at least 6 characters" }, ]} > <Input.Password iconRender={(visible) => (visible ? <FaEyeSlash /> : <FaEye />)} visibilityToggle={{ visible: showPassword, onVisibleChange: setShowPassword, }} /> </Form.Item> <Form.Item label="Confirm Password" name="confirmPassword" dependencies={["password"]} rules={[ { required: true, message: "Please confirm your password" }, ({ getFieldValue }) => ({ validator(_, value) { if (!value || getFieldValue("password") === value) { return Promise.resolve(); } return Promise.reject(new Error("Passwords do not match")); }, }), ]} > <Input.Password /> </Form.Item> <Form.Item label="Phone Number" name="phone" rules={[ { required: true, message: "Phone number is required" }, { pattern: /^\d{10,15}$/, message: "Phone number is not valid", }, ]} > <Input /> </Form.Item> <Form.Item label="Gender" name="gender" rules={[{ required: true, message: "Please select your gender" }]} > <Select placeholder="Select gender"> <Select.Option value="male">Male</Select.Option> <Select.Option value="female">Female</Select.Option> <Select.Option value="other">Other</Select.Option> </Select> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit" block> Sign up </Button> </Form.Item> </Form> </div> </div> </div> ); } export default RegisterPage; .login container { display: flex; min height: 100vh; font family: Arial, sans serif; } .login image section { width: 50%; position: relative; display: none; } @media (min width: 768px) { .login image section { display: block; } } .login image { width: 100%; height: 100%; object fit: cover; } .image overlay { position: absolute; inset: 0; background color: rgba(30, 58, 138, 0.3); } .login form section { flex: 1; display: flex; align items: center; justify content: center; background color: #f9fafb; padding: 2rem; position: relative; } .language select { position: absolute; top: 1rem; right: 1rem; } .language select select { padding: 0.5rem 1rem; border radius: 4px; border: 1px solid #ccc; } .form wrapper { max width: 400px; width: 100%; } .title { font size: 24px; font weight: bold; text align: center; } .subtitle { text align: center; margin bottom: 1.5rem; color: #555; } .form { display: flex; flex direction: column; gap: 1rem; } .form group label { font size: 0.875rem; margin bottom: 0.25rem; display: block; } .input { width: 100%; padding: 0.5rem; border: 1px solid #ccc; border radius: 4px; } .input.error { border color: red; } .error text { color: red; font size: 0.75rem; } .password wrapper { position: relative; } .toggle password { position: absolute; right: 10px; top: 50%; transform: translateY( 50%); background: transparent; border: none; cursor: pointer; color: #777; } .form options { display: flex; justify content: space between; align items: center; font size: 0.875rem; } .checkbox wrapper { display: flex; align items: center; gap: 0.5rem; } .forgot password { color: #2563eb; text decoration: none; } .btn { padding: 0.5rem; border radius: 4px; font size: 0.875rem; font weight: 500; cursor: pointer; display: flex; align items: center; justify content: center; } .btn.primary { background color: #2563eb; color: white; border: none; } .btn.primary:hover { background color: #1d4ed8; } .divider { text align: center; color: #777; font size: 0.875rem; position: relative; margin: 1.5rem 0; } .divider::before, .divider::after { content: ""; position: absolute; top: 50%; width: 40%; height: 1px; background color: #ccc; } .divider::before { left: 0; } .divider::after { right: 0; } .oauth buttons { display: flex; gap: 1rem; } .btn.secondary { background color: white; border: 1px solid #ccc; color: #444; } .btn.secondary:hover { background color: #f0f0f0; } .icon { margin right: 0.5rem; } .icon.google { color: #db4437; } .icon.microsoft { color: #0078d4; }đổi cho tôi các thành như Họ tên, Tài khoản, Mật khẩu, giới tính, ngày sinh, địa chỉ, Số điện thoại