56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
'use client';
|
|
import { useState, FormEvent } from 'react';
|
|
|
|
export default function Contact() {
|
|
const [form, setForm] = useState({ name: '', email: '', msg: '' });
|
|
const [error, setError] = useState('');
|
|
|
|
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
if (!form.name || !form.email || !form.msg) {
|
|
setError('所有字段均为必填');
|
|
return;
|
|
}
|
|
// TODO: 调用 API 提交表单
|
|
};
|
|
|
|
return (
|
|
<section className="px-6 py-section bg-background">
|
|
<div className="max-w-screen-sm mx-auto space-y-6">
|
|
<h2 className="text-3xl font-light text-center">联系我们</h2>
|
|
{error && <p className="text-red-500 text-sm">{error}</p>}
|
|
<form className="flex flex-col space-y-4" onSubmit={handleSubmit}>
|
|
<input
|
|
type="text"
|
|
placeholder="姓名"
|
|
className="border p-3 rounded"
|
|
value={form.name}
|
|
onChange={e => setForm({ ...form, name: e.target.value })}
|
|
/>
|
|
<input
|
|
type="email"
|
|
placeholder="邮箱"
|
|
className="border p-3 rounded"
|
|
value={form.email}
|
|
onChange={e => setForm({ ...form, email: e.target.value })}
|
|
/>
|
|
<textarea
|
|
placeholder="留言"
|
|
rows={5}
|
|
className="border p-3 rounded"
|
|
value={form.msg}
|
|
onChange={e => setForm({ ...form, msg: e.target.value })}
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="py-3 bg-accent text-white rounded disabled:opacity-50"
|
|
disabled={!form.name || !form.email || !form.msg}
|
|
>
|
|
发送
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|