feat: url scraper to recipe

islands/IngredientsList.tsx

@@ -1,15 +1,15 @@
 import { Signal } from "@preact/signals";
-import type {
-  Ingredient,
-  IngredientGroup,
-  Ingredients,
-} from "../lib/recipes.ts";
+import type { Ingredient, IngredientGroup } from "@lib/recipeSchema.ts";
 import { FunctionalComponent } from "preact";
 
 function numberToString(num: number) {
   return (Math.floor(num * 4) / 4).toString();
 }
 
+function stringToNumber(str: string) {
+  return parseFloat(str);
+}
+
 const Ingredient = (
   { ingredient, amount, key = "", portion = 1 }: {
     ingredient: Ingredient;
@@ -18,10 +18,12 @@ const Ingredient = (
     portion?: number;
   },
 ) => {
-  const { type, amount: _amount, unit } = ingredient;
+  const { name, quantity, unit } = ingredient;
 
-  const finalAmount = (typeof _amount === "number" && amount)
-    ? (_amount / portion) * (amount?.value || 1)
+  const parsedQuantity = stringToNumber(quantity);
+
+  const finalAmount = (typeof parsedQuantity === "number" && amount)
+    ? (parsedQuantity / portion) * (amount?.value || 1)
     : "";
 
   return (
@@ -30,13 +32,17 @@ const Ingredient = (
         {numberToString(finalAmount || 0) +
           (typeof unit === "string" ? unit : "")}
       </td>
-      <td class="px-4 py-2">{type}</td>
+      <td class="px-4 py-2">{name}</td>
     </tr>
   );
 };
 
 export const IngredientsList: FunctionalComponent<
-  { ingredients: Ingredients; amount: Signal<number>; portion?: number }
+  {
+    ingredients: (Ingredient | IngredientGroup)[];
+    amount: Signal<number>;
+    portion?: number;
+  }
 > = (
   { ingredients, amount, portion },
 ) => {
@@ -44,10 +50,9 @@ export const IngredientsList: FunctionalComponent<
     <table class="w-full border-collapse table-auto">
       <tbody>
         {ingredients.map((item, index) => {
-          if ("name" in item) {
+          if ("items" in item) {
             // Render IngredientGroup
-            const { name, ingredients: groupIngredients } =
-              item as IngredientGroup;
+            const { name, items: groupIngredients } = item as IngredientGroup;
 
             return (
               <>