import { SelectJenisKelamin } from "@/components/costum/SelectJenisKelamin";

export default function AddAnggotaPage() {
    return (
        <>
            <div className="card" style={{ width : 960, margin : 'auto' }}>
                <div className="card-header">
                    <h3 className="card-title">Formulir Anggota</h3>
                </div>
                <div className="card-body">
                    <div className="row mb-3">
                        <div className="col-md-4">
                            <label className="form-label">Nomor KTP<sup className="text-danger">*</sup></label>
                            <input className="form-control" />
                        </div>
                        <div className="col-md-8">
                            <label className="form-label">Nama Lengkap<sup className="text-danger text-lg">*</sup></label>
                            <input className="form-control" />
                        </div>
                    </div>
                    <div className="row mb-3">
                        <div className="col-md-6">
                            <label className="form-label">Alamat<sup className="text-danger text-lg">*</sup></label>
                            <input className="form-control" />
                        </div>
                        <div className="col-md-3">
                            <label className="form-label">RT</label>
                            <input className="form-control" type="number" />
                        </div>
                        <div className="col-md-3">
                            <label className="form-label">RW</label>
                            <input className="form-control" type="number" />
                        </div>
                    </div>
                    <div className="row mb-3">
                        <div className="col-md-3">
                            <label className="form-label">Tempat Lahir</label>
                            <input className="form-control" />
                        </div>
                        <div className="col-md-3">
                            <label className="form-label">Tanggal Lahir</label>
                            <input className="form-control" type="date" />
                        </div>
                        <div className="col-md-3">
                            <label className="form-label">Jenis Kelamin<sup className="text-danger">*</sup></label>
                            <SelectJenisKelamin placeholder="Jenis Kelamin" />
                        </div>
                    </div>
                </div>
                <div className="card-footer">
                    <button className="btn btn-primary">Simpan</button>
                </div>
            </div>
        </>
    );
}
