import React, { useState } from 'react';

interface Props {
  onAuth: (username: string, password: string) => void;
}

const AuthComponent: React.FC<Props> = ({ onAuth }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    onAuth(username, password);
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 20 }}>
        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', margin: 10 }}>
          <label htmlFor="username" style={{ marginRight: 10 }}>Username:</label>
          <input
            type="text"
            id="username"
            value={username}
            onChange={(event) => setUsername(event.target.value)}
            style={{ padding: 10, fontSize: 16 }}
          />
        </div>
        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', margin: 10 }}>
          <label htmlFor="password" style={{ marginRight: 10 }}>Password:</label>
          <input
            type="password"
            id="password"
            value={password}
            onChange={(event) => setPassword(event.target.value)}
            style={{ padding: 10, fontSize: 16 }}
          />
        </div>
        <button type="submit" style={{ padding: 10, marginTop: 20, fontSize: 18, backgroundColor: 'lightblue', borderRadius: 5 }}>Submit</button>
      </form>
    </div>
  );
};

export default AuthComponent;
นำเข้าปฏิกิริยา { useState } จาก 'ปฏิกิริยา'; อุปกรณ์ประกอบฉากอินเทอร์เฟซ { onAuth: (ชื่อผู้ใช้: สตริง, รหัสผ่าน: สตริง) => เป็นโมฆะ; } const AuthComponent: React.FC<Props> = ({ onAuth }) => { const [ชื่อผู้ใช้, setUsername] = useState(''); const [รหัสผ่าน, setPassword] = useState(''); const handleSubmit = (เหตุการณ์: React.FormEvent) => { event.preventDefault(); onAuth(ชื่อผู้ใช้, รหัสผ่าน); }; return ( <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}> <form onSubmit={handleSubmit} style={{ แสดง: 'flex' , flexDirection: 'คอลัมน์', alignItems: 'center', justifyContent: 'center', padding: 20 }}> <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent : 'center', ระยะขอบ: 10 }}> <label htmlFor="username" style={{ marginRight: 10 }}>ชื่อผู้ใช้:</label> <input type="text" id="username" value={username } onChange={(event) => setUsername(event.target.value)} style={{ padding: 10, fontSize: 16 }} /> </div> <div style={{ display: 'flex', flexDirection : 'row', alignItems: 'center', justifyContent: 'center', ระยะขอบ: 10 }}> <label htmlFor="password" style={{ marginRight: 10 }}>รหัสผ่าน:</label> <input type= "password" id="password" value={password} onChange={(event) => setPassword(event.target.value)} style={{ padding: 10, fontSize: 16 }} /> </div> < button type="submit" style={{ padding: 10, marginTop: 20, fontSize: 18, backgroundColor: 'lightblue', borderRadius: 5 }}>ส่ง</button> </form> </div> ); }; ส่งออก AuthComponent เริ่มต้น;
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence