fix add plant

src/components/Modals.js

@@ -1,4 +1,3 @@
-import { classNames } from "../utilities/classNames"
 
 export const Modal = ({children, isOpen, customClose = false, ...props}) => {
 
@@ -26,3 +25,5 @@ export const Modal = ({children, isOpen, customClose = false, ...props}) => {
 export const ModalTitle = ({children, ...props}) => {
     return <div className="bg-green-700 text-white text-2xl font-bold text-center -mx-2 -mt-2 p-2 rounded-tl rounded-tr" {...props}>{children}</div>
 }
+
+export const isCloseModal = e => e.target.classList.contains("overlay") || e.target.classList.contains("close-button")

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>
+}