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      <label>
17        <input
18          type="text"
19          name="recipeId"
20          placeholder="URL ou ID de la recette Cookidoo"
21        />
22        <button type="submit">Ajouter</button>
23      </label>
24    </form>
25  );
26};
27
28export const RecipesList: FC<{ recipes: Recipe[] }> = (props) => {
29  return (
30    <form method="post" action="/add-grocery-list">
31      <h2>Liste des recettes</h2>
32      <ul>
33        {props.recipes.map((recipe) => (
34          <li>
35            <input type="checkbox" name={`${recipe.id}`} />
36            <a href={recipe.url} target="_blank">
37              {recipe.name}
38            </a>
39          </li>
40        ))}
41      </ul>
42      <button type="submit">Créer une liste de course</button>
43    </form>
44  );
45};
46
47export const GroceryList: FC<{
48  recipes: Recipe[];
49  ingredients: GroceryItem[];
50}> = (props) => {
51  return (
52    <div>
53      <h2>Recettes:</h2>
54      <ul>
55        {props.recipes.map((recipe) => (
56          <li>{recipe.name}</li>
57        ))}
58      </ul>
59      <h2>Liste des ingrédients:</h2>
60      <ul>
61        {props.ingredients.map(({ name, quantity, unit }) => (
62          <li>
63            <input type="checkbox" />
64            <strong>{name}</strong>: {quantity} {unit}
65          </li>
66        ))}
67      </ul>
68    </div>
69  );
70};