fix add plant

src/components/Plants.js

@@ -1,11 +1,14 @@
 import { Link } from "preact-router/match"
-import {getPicture} from "../utilities/pictures";
+import {getPicture} from "../utilities/pictures"
+import {InputField, TextAreaField} from "./Form"
+import {Button} from "./Button"
+import {useState} from "preact/hooks"
 
 export const PlantThumb = ({ plant, children }) => {
 
     return <Link href={`/plant/${plant.id}`} class="block h-48">
             <div className="bg-green-400 relative rounded shadow-lg flex flex-col">
-                <img src={getPicture(plant.id)} alt="" className="object-cover h-48 w-full rounded" />
+                <img src={getPicture(plant.id)} alt="" className="object-cover h-48 w-full min-h-48 min-w-48 rounded" />
                 <div className="bg-green-700 text-white p-2 text-center absolute bottom-0 w-full rounded-bl rounded-br">
                     {children}
                 </div>
@@ -15,3 +18,18 @@ export const PlantThumb = ({ plant, children }) => {
             </div>
     </Link>
 }
+
+export const PlantForm = ({children, plant, ...props}) => {
+
+    const [plantForm, setPlantForm] = useState(plant)
+
+    return <form onSubmit={e => props.onChange(e, plantForm)}>
+
+        <InputField name="name" className="mb-2 mt-5" value={plantForm.name} onChange={(e) => setPlantForm({ ...plantForm, name: e.target.value }) }>Name</InputField>
+        <TextAreaField name="description" className="mb-5" value={plantForm.description}  onChange={(e) => setPlantForm({ ...plantForm, description: e.target.value })}>Description</TextAreaField>
+
+        <Button type="submit" className="block w-full mt-5 mb-2 bg-green-800 hover:bg-green-900 text-white mx-auto px-2 py-1 shadow">
+            { children }
+        </Button>
+    </form>
+}