feat: enhance planting details form with additional fields for spacing and depth

This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2025-02-13 21:40:27 +07:00
parent 834a87b1f9
commit 4b9f729cb1
2 changed files with 104 additions and 3 deletions

View File

@ -1,7 +1,14 @@
import PlantingDetailsForm from "./planting-detail-form";
import { Separator } from "@/components/ui/separator";
export default function SetupPage() {
return (
<div>
<h1>Setup Page</h1>
<div className="p-5">
<h1 className="text-2xl">Plating Details</h1>
<Separator className="mt-3" />
<div className="mt-3">
<PlantingDetailsForm />
</div>
</div>
);
}

View File

@ -1,3 +1,5 @@
"use client";
import {
Form,
FormControl,
@ -29,7 +31,7 @@ export default function PlantingDetailsForm() {
<FormItem>
<FormLabel className="font-bold text-lg">Day to Emerge</FormLabel>
<FormControl>
<div className="mt-10 space-y-5">
<div className="mt-5 space-y-5">
<div className="flex space-x-5">
<Input
type="text"
@ -44,6 +46,98 @@ export default function PlantingDetailsForm() {
</FormItem>
)}
/>
<FormField
control={form.control}
name="plantSpacing"
render={({ field }: { field: any }) => (
<FormItem>
<FormLabel className="font-bold text-lg">Plant Spacing</FormLabel>
<FormControl>
<div className="mt-5 space-y-5">
<div className="flex space-x-5">
<Input
type="text"
id="plantSpacing"
className="w-96"
{...field}
/>
</div>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="rowSpacing"
render={({ field }: { field: any }) => (
<FormItem>
<FormLabel className="font-bold text-lg">Row Spacing</FormLabel>
<FormControl>
<div className="mt-10 space-y-5">
<div className="flex space-x-5">
<Input
type="text"
id="rowSpacing"
className="w-96"
{...field}
/>
</div>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="plantingDepth"
render={({ field }: { field: any }) => (
<FormItem>
<FormLabel className="font-bold text-lg">
Planting Depth
</FormLabel>
<FormControl>
<div className="mt-10 space-y-5">
<div className="flex space-x-5">
<Input
type="text"
id="plantingDepth"
className="w-96"
{...field}
/>
</div>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="averageHeight"
render={({ field }: { field: any }) => (
<FormItem>
<FormLabel className="font-bold text-lg">
Average Height
</FormLabel>
<FormControl>
<div className="mt-10 space-y-5">
<div className="flex space-x-5">
<Input
type="text"
id="averageHeight"
className="w-96"
{...field}
/>
</div>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</form>
</Form>
);