87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
import { redirect } from "next/navigation";
|
|
import { createContainer } from "@/modules/garden/server/actions";
|
|
|
|
export default function NewContainerPage() {
|
|
async function handleCreate(formData: FormData) {
|
|
"use server";
|
|
await createContainer({
|
|
name: formData.get("name") as string,
|
|
type: (formData.get("type") as string) || "other",
|
|
locationNotes: (formData.get("locationNotes") as string) || null,
|
|
});
|
|
redirect("/garden");
|
|
}
|
|
|
|
return (
|
|
<div className="page-content max-w-lg">
|
|
<div className="flex items-center gap-3 mb-1">
|
|
<a href="/garden" className="btn btn-ghost btn-icon" aria-label="Back to garden">
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<polyline points="15 18 9 12 15 6" />
|
|
</svg>
|
|
</a>
|
|
<h1 className="page-title">New container</h1>
|
|
</div>
|
|
<form action={handleCreate} className="flex flex-col gap-4 mt-4">
|
|
<div className="flex flex-col gap-1">
|
|
<label htmlFor="name" className="text-sm font-medium">
|
|
Name
|
|
</label>
|
|
<input id="name" name="name" required maxLength={120} className="input" />
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<label htmlFor="type" className="text-sm font-medium">
|
|
Type
|
|
</label>
|
|
<select id="type" name="type" defaultValue="other">
|
|
{(
|
|
[
|
|
["shelf", "Shelf"],
|
|
["terrarium", "Terrarium"],
|
|
["raised-bed", "Raised bed"],
|
|
["window-box", "Window box"],
|
|
["single-pot", "Single pot"],
|
|
["outdoor", "Outdoor"],
|
|
["other", "Other"],
|
|
] as const
|
|
).map(([v, l]) => (
|
|
<option key={v} value={v}>
|
|
{l}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<label htmlFor="locationNotes" className="text-sm font-medium">
|
|
Location notes
|
|
</label>
|
|
<textarea
|
|
id="locationNotes"
|
|
name="locationNotes"
|
|
maxLength={500}
|
|
rows={2}
|
|
className="input"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2 justify-end">
|
|
<a href="/garden" className="btn btn-ghost">
|
|
Cancel
|
|
</a>
|
|
<button type="submit" className="btn btn-primary">
|
|
Create
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|