41 lines
1.1 KiB
JavaScript
41 lines
1.1 KiB
JavaScript
import { html } from 'htm/preact'
|
|
import { TextField } from '#tofu/components/atoms/TextField.js'
|
|
import { DishNameField } from '#tofu/components/molecules/DishNameField.js'
|
|
import { formatDateKey } from '#tofu/tools/dates/formatDateKey.js'
|
|
import { formatDayLabel } from '#tofu/tools/dates/formatDayLabel.js'
|
|
|
|
// One day of the week sheet. Field ids derive from the date key so that every
|
|
// <label for> in the page points at exactly one input.
|
|
export function DayEntry({
|
|
date,
|
|
dish,
|
|
ingredients,
|
|
suggestions = [],
|
|
ingredientsHint = '',
|
|
onDishInput,
|
|
onDishSelect,
|
|
onIngredientsInput,
|
|
}) {
|
|
const dateKey = formatDateKey(date)
|
|
|
|
return html`
|
|
<section class="day">
|
|
<h2 class="day-title">${formatDayLabel(date)}</h2>
|
|
<${DishNameField}
|
|
id=${`dish-${dateKey}`}
|
|
label="Plat"
|
|
value=${dish}
|
|
suggestions=${suggestions}
|
|
onInput=${onDishInput}
|
|
onSelect=${onDishSelect}
|
|
/>
|
|
<${TextField}
|
|
id=${`ingredients-${dateKey}`}
|
|
label="Ingrédients"
|
|
value=${ingredients}
|
|
onInput=${onIngredientsInput}
|
|
placeholder=${ingredientsHint}
|
|
/>
|
|
</section>
|
|
`
|
|
}
|