63 lines
2.4 KiB
TypeScript
63 lines
2.4 KiB
TypeScript
import { type FormEvent, useState } from 'react'
|
|
|
|
interface CreateTaskFormProps {
|
|
isSubmitting: boolean
|
|
onSubmit: (input: { name: string; description: string }) => Promise<void>
|
|
}
|
|
|
|
export function CreateTaskForm({ isSubmitting, onSubmit }: CreateTaskFormProps) {
|
|
const [name, setName] = useState('')
|
|
const [description, setDescription] = useState('')
|
|
|
|
async function handleSubmit(event: FormEvent<HTMLFormElement>) {
|
|
event.preventDefault()
|
|
await onSubmit({ name, description })
|
|
setName('')
|
|
setDescription('')
|
|
}
|
|
|
|
return (
|
|
<form
|
|
className="rounded-[2rem] border border-slate-900/10 bg-slate-950 p-6 text-white shadow-[0_24px_80px_rgba(15,23,42,0.24)]"
|
|
onSubmit={handleSubmit}
|
|
>
|
|
<div className="mb-6">
|
|
<p className="text-sm uppercase tracking-[0.25em] text-sky-200">Create task</p>
|
|
<h2 className="mt-3 text-3xl font-semibold">Capture work while it is fresh.</h2>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<label className="block text-sm text-slate-200">
|
|
<span className="mb-2 block font-medium">Name</span>
|
|
<input
|
|
className="w-full rounded-2xl border border-white/10 bg-white/10 px-4 py-3 text-white outline-none transition placeholder:text-slate-400 focus:border-sky-300"
|
|
placeholder="Prepare sprint review"
|
|
value={name}
|
|
onChange={(event) => setName(event.target.value)}
|
|
disabled={isSubmitting}
|
|
required
|
|
/>
|
|
</label>
|
|
|
|
<label className="block text-sm text-slate-200">
|
|
<span className="mb-2 block font-medium">Description</span>
|
|
<textarea
|
|
className="min-h-28 w-full rounded-2xl border border-white/10 bg-white/10 px-4 py-3 text-white outline-none transition placeholder:text-slate-400 focus:border-sky-300"
|
|
placeholder="Optional context for this task"
|
|
value={description}
|
|
onChange={(event) => setDescription(event.target.value)}
|
|
disabled={isSubmitting}
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="mt-6 inline-flex items-center rounded-full bg-sky-300 px-5 py-3 text-sm font-semibold text-slate-950 transition hover:bg-sky-200 disabled:cursor-not-allowed disabled:opacity-70"
|
|
>
|
|
{isSubmitting ? 'Saving...' : 'Create task'}
|
|
</button>
|
|
</form>
|
|
)
|
|
}
|