57 lines
2.6 KiB
TypeScript
57 lines
2.6 KiB
TypeScript
import React from "react";
|
|
|
|
const ContactForm = () => {
|
|
return (
|
|
<div className="max-w-2xl mx-auto bg-white p-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-center mb-6">
|
|
<img src="/assets/icons-contact.png" alt="contact" />
|
|
<h2 className="ml-4 text-xl font-bold">Hubungi Kami</h2>
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-gray-800 mb-1">Tulis Pesan</h3>
|
|
<p className="text-sm text-gray-600 mb-6">Silahkan tinggalkan pesan Anda pada kolom yang tersedia</p>
|
|
|
|
{/* Form */}
|
|
<form>
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Nama</label>
|
|
<input type="text" placeholder="Masukkan nama lengkap Anda" className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required />
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
|
|
<input type="email" placeholder="name@mail.com" className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required />
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">No. Handphone (Optional)</label>
|
|
<input type="text" placeholder="Masukkan no.handphone" className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Subjek</label>
|
|
<select className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" defaultValue="">
|
|
<option value="" disabled>
|
|
Pilih Subjek
|
|
</option>
|
|
<option value="1">Pertanyaan</option>
|
|
<option value="2">Kritik</option>
|
|
<option value="3">Saran</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Pesan</label>
|
|
<textarea placeholder="Tulis pesan Anda" rows={4} className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
|
|
</div>
|
|
|
|
<button type="submit" className="w-fit bg-blue-500 flex justify-self-end text-white p-2 px-8 rounded-md hover:bg-blue-600 transition">
|
|
Kirim
|
|
</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ContactForm;
|