42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import type { SubmitEventHandler } from 'react'
|
|
import { useState } from 'react'
|
|
|
|
interface TodoFormProps {
|
|
onSubmit: (title: string) => void
|
|
isPending: boolean
|
|
}
|
|
|
|
export const TodoForm = ({ onSubmit, isPending }: TodoFormProps) => {
|
|
const [title, setTitle] = useState('')
|
|
|
|
const handleSubmit: SubmitEventHandler<HTMLFormElement> = (e) => {
|
|
e.preventDefault()
|
|
if (title.trim()) {
|
|
onSubmit(title.trim())
|
|
setTitle('')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="relative group z-10">
|
|
<div className="relative transform transition-all duration-200 focus-within:-translate-y-1">
|
|
<input
|
|
type="text"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
placeholder="添加新任务..."
|
|
className="w-full pl-6 pr-32 py-5 bg-white rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] border-0 ring-1 ring-slate-100 focus:ring-2 focus:ring-indigo-500/50 outline-none transition-all placeholder:text-slate-400 text-lg text-slate-700"
|
|
disabled={isPending}
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={isPending || !title.trim()}
|
|
className="absolute right-3 top-3 bottom-3 px-6 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-medium transition-all shadow-md shadow-indigo-200 disabled:opacity-50 disabled:shadow-none hover:shadow-lg hover:shadow-indigo-300 active:scale-95"
|
|
>
|
|
{isPending ? '添加中' : '添加'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)
|
|
}
|