add location

src/components/Plants.js

@@ -25,8 +25,53 @@ export const PlantForm = ({children, plant, ...props}) => {
 
     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>
+        <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>
+
+        <fieldset className="mb-5 flex gap-2 max-w-[300px] mx-auto">
+            <div className="flex-1">
+                <input id="indoor"
+                       name="indoor"
+                       type="radio"
+                       checked={plantForm.indoor === true}
+                       onChange={() => setPlantForm({ ...plantForm, indoor: true })}
+                       className="sr-only peer"
+                />
+                <label htmlFor="indoor" className="w-full block peer-checked:bg-blue-700 bg-blue-500 hover:bg-blue-700 px-2 py-1 text-center rounded border dark:border-white">
+                    Indoor
+                </label>
+            </div>
+
+            <div className="flex-1">
+                <input id="outdoor"
+                       name="outdoor"
+                       type="radio"
+                       checked={plantForm.indoor === false}
+                       onChange={() => setPlantForm({ ...plantForm, indoor: false })}
+                       className="sr-only peer"
+                />
+                <label htmlFor="outdoor" className="w-full block peer-checked:bg-blue-700 bg-blue-500 hover:bg-blue-700 px-2 py-1 text-center rounded border dark:border-white">
+                    Outdoor
+                </label>
+            </div>
+        </fieldset>
+
+        <InputField name="spot"
+                    className="mt-5"
+                    value={plantForm.spot}
+                    onChange={(e) => setPlantForm({ ...plantForm, spot: e.target.value }) }>
+            Spot
+        </InputField>
 
         <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 }