1import type { FC } from "hono/jsx";
 2
 3export const Message: FC<{ url: string }> = (props) => {
 4  const url = new URL(props.url);
 5  const msg = url.searchParams.get("msg");
 6  const error = url.searchParams.get("error");
 7  if (error) return <p class="message error">{error}</p>;
 8  else if (msg) return <p class="message">{msg}</p>;
 9  else return null;
10};
11
12export const AddRecipe: FC = () => {
13  return (
14    <form method="post" action="/add-recipe">
15      <h2>Ajouter une recette</h2>
16      <p>
17        Découvrez des recettes sur{" "}
18        <a href="https://cookidoo.fr/search/fr-FR?languages=fr" target="_blank">
19          Cookidoo
20        </a>
21        .
22      </p>
23      <label style="display:flex;width:100%;">
24        <input
25          type="text"
26          name="recipeId"
27          placeholder="URL ou ID de la recette Cookidoo"
28          style="flex-grow:1;"
29        />
30        <button type="submit">Ajouter</button>
31      </label>
32    </form>
33  );
34};
35
36export const RecipesList: FC<{ recipes: Recipe[] }> = (props) => {
37  return (
38    <form method="post" action="/add-grocery-list">
39      <h2>Liste des recettes</h2>
40      <ul>
41        {props.recipes.map((recipe) => (
42          <li>
43            <input type="checkbox" name={`${recipe.id}`} />
44            <a href={recipe.url} target="_blank">
45              {recipe.name}
46            </a>
47          </li>
48        ))}
49      </ul>
50      <button type="submit">Créer une liste de course</button>
51    </form>
52  );
53};
54
55export const GroceryList: FC<{
56  recipes: Recipe[];
57  ingredients: GroceryItem[];
58}> = (props) => {
59  return (
60    <div>
61      <h2>Recettes:</h2>
62      <ul>
63        {props.recipes.map((recipe) => (
64          <li>{recipe.name}</li>
65        ))}
66      </ul>
67      <h2>Liste des ingrédients:</h2>
68      <ul>
69        {props.ingredients.map(({ name, quantity, unit }) => (
70          <li>
71            <input type="checkbox" />
72            <strong>{name}</strong>: {quantity} {unit}
73          </li>
74        ))}
75      </ul>
76    </div>
77  );
78};