feat: show rating

islands/Counter.tsx

@@ -1,5 +1,5 @@
 import type { Signal } from "@preact/signals";
-import { Button } from "../components/Button.tsx";
+import { Button } from "@components/Button.tsx";
 
 interface CounterProps {
   count: Signal<number>;
@@ -7,10 +7,10 @@ interface CounterProps {
 
 export default function Counter(props: CounterProps) {
   return (
-    <div class="flex gap-8 py-6">
-      <Button onClick={() => props.count.value -= 1}>-1</Button>
+    <div class="flex gap-2 items-center">
+      <Button onClick={() => props.count.value -= 1}>-</Button>
       <p class="text-3xl">{props.count}</p>
-      <Button onClick={() => props.count.value += 1}>+1</Button>
+      <Button onClick={() => props.count.value += 1}>+</Button>
     </div>
   );
 }

islands/IngredientsList.tsx

@@ -0,0 +1,78 @@
+import { Signal } from "@preact/signals";
+import type {
+  Ingredient,
+  IngredientGroup,
+  Ingredients,
+} from "../lib/recipes.ts";
+import { FunctionalComponent } from "preact";
+
+type IngredientsProps = {
+  ingredients: Ingredients;
+};
+
+const Ingredient = (
+  { ingredient, amount, key = "", portion = 1 }: {
+    ingredient: Ingredient;
+    amount: Signal<number>;
+    key?: string | number;
+    portion?: number;
+  },
+) => {
+  const { type, amount: _amount, unit } = ingredient;
+
+  const finalAmount = (typeof _amount === "number" && amount)
+    ? (_amount / portion) * (amount?.value || 1)
+    : "";
+
+  return (
+    <tr key={key}>
+      <td class="pr-4 py-2">
+        {finalAmount + (typeof unit === "string" ? unit : "")}
+      </td>
+      <td class="px-4 py-2">{type}</td>
+    </tr>
+  );
+};
+
+export const IngredientsList: FunctionalComponent<
+  { ingredients: Ingredients; amount: Signal<number>; portion?: number }
+> = (
+  { ingredients, amount, portion },
+) => {
+  return (
+    <table class="w-full border-collapse table-auto">
+      <tbody>
+        {ingredients.map((item, index) => {
+          if ("name" in item) {
+            // Render IngredientGroup
+            const { name, ingredients: groupIngredients } =
+              item as IngredientGroup;
+
+            return (
+              <>
+                <tr key={index}>
+                  <td colSpan={3} class="pr-4 py-2 font-italic">{name}</td>
+                </tr>
+                {groupIngredients.map((item, index) => {
+                  // Render Ingredient
+                  return (
+                    <Ingredient
+                      key={index}
+                      ingredient={item}
+                      amount={amount}
+                      portion={portion}
+                    />
+                  );
+                })}
+              </>
+            );
+          } else {
+            return (
+              <Ingredient ingredient={item} amount={amount} portion={portion} />
+            );
+          }
+        })}
+      </tbody>
+    </table>
+  );
+};