fix: soo many lint errors

islands/IngredientsList.tsx

@@ -9,15 +9,12 @@ function formatAmount(num: number) {
 }
 
 function formatUnit(unit: string, amount: number) {
-  const unitKey = unit.toLowerCase() as keyof typeof unitsOfMeasure;
+  if (!unit) return "";
+  const unitKey = unit.toLowerCase() as (keyof typeof unitsOfMeasure);
   if (unitKey in unitsOfMeasure) {
     if (amount > 1 && unitsOfMeasure[unitKey].plural !== undefined) {
       return unitsOfMeasure[unitKey].plural;
     }
-    if (unitKey !== "cup") {
-      return unitsOfMeasure[unitKey].short;
-    }
-
     return unitKey.toString();
   } else {
     return unit;
@@ -66,9 +63,22 @@ export const IngredientsList: FunctionalComponent<
     <table class="w-full border-collapse table-auto">
       <tbody>
         {ingredients.map((item) => {
-          return (
-            <Ingredient ingredient={item} amount={amount} portion={portion} />
-          );
+          if ("items" in item) {
+            return item.items.map((ing, i) => {
+              return (
+                <Ingredient
+                  key={i}
+                  ingredient={ing}
+                  amount={amount}
+                  portion={portion}
+                />
+              );
+            });
+          } else {
+            return (
+              <Ingredient ingredient={item} amount={amount} portion={portion} />
+            );
+          }
         })}
       </tbody>
     </table>