81 lines
3.5 KiB
JavaScript
81 lines
3.5 KiB
JavaScript
import { Link } from "preact-router/match"
|
|
import {getPicture} from "../utilities/pictures"
|
|
import {InputField, TextAreaField} from "./Form"
|
|
import {Button} from "./Button"
|
|
import {useState} from "preact/hooks"
|
|
import {Text} from "./Translation"
|
|
|
|
export const PlantThumb = ({ plant, children }) => {
|
|
|
|
return <Link href={`/plant/${plant.id}`} class="block h-48 cursor-pointer">
|
|
<div className="group bg-primary-light relative rounded shadow-lg flex flex-col">
|
|
<img src={getPicture(plant.id)} alt="" className="object-cover h-48 w-full min-h-48 min-w-48 rounded" />
|
|
<div className="bg-primary group-hover:bg-primary-dark text-white p-2 text-center absolute bottom-0 w-full rounded-bl rounded-br">
|
|
{children}
|
|
</div>
|
|
<div title="Actions" className="absolute right-2 top-2 rounded-full flex justify-center items-center bg-primary group-hover:bg-primary-dark w-6 h-6">
|
|
{plant.actions.length}
|
|
</div>
|
|
</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 }) }>
|
|
<Text text="Name" />
|
|
</InputField>
|
|
<TextAreaField name="description"
|
|
className="mb-5"
|
|
value={plantForm.description}
|
|
onChange={(e) => setPlantForm({ ...plantForm, description: e.target.value })}>
|
|
<Text text="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">
|
|
<Text text="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">
|
|
<Text text="Outdoor" />
|
|
</label>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<InputField name="spot"
|
|
className="mt-5"
|
|
value={plantForm.spot}
|
|
onChange={(e) => setPlantForm({ ...plantForm, spot: e.target.value }) }>
|
|
<Text text="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 }
|
|
</Button>
|
|
</form>
|
|
} |