Mission 3: Workshop — สร้างฟอร์มสมัครสมาชิก

เป้าหมายของ Mission นี้: สร้างฟอร์มสมัครสมาชิกที่มี 4 ช่อง: ชื่อ, อีเมล, เบอร์โทร, รหัสผ่าน

flowchart LR
    F1["ชื่อ"] --> S1["name"]
    F2["อีเมล"] --> S2["email"]
    F3["เบอร์โทร"] --> S3["phone"]
    F4["รหัสผ่าน"] --> S4["password"]

จุดเริ่มต้น (ลองเติมส่วนที่เหลือเอง)

"use client";
import { useState } from "react";

export function SignupForm() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [password, setPassword] = useState("");

  return (
    <form className="flex flex-col gap-3">
      <input value={name} onChange={(e) => setName(e.target.value)} placeholder="ชื่อ" />
      {/* TODO: เพิ่มช่อง email, phone, password ให้ครบ (password ใช้ type="password") */}
      <button type="submit">สมัครสมาชิก</button>
    </form>
  );
}

ทำให้ครบทั้ง 4 ช่องก่อน ลองพิมพ์ทดสอบดูว่าค่าที่พิมพ์เข้า state จริงไหม (console.log ดูได้)