feat: add image resizing

components/IngredientsList.tsx

@@ -1,33 +1,71 @@
-import type { Ingredient, Ingredients } from "../lib/recipes.ts";
+import type {
+  Ingredient,
+  IngredientGroup,
+  Ingredients,
+} from "../lib/recipes.ts";
+import { FunctionalComponent } from "preact";
 
 type IngredientsProps = {
   ingredients: Ingredients;
 };
 
-function formatIngredient(ingredient: Ingredient) {
-  return `${
-    ingredient.amount && ingredient.unit &&
-    ` - ${ingredient.amount} ${ingredient.unit}`
-  } ${ingredient.type}`;
-}
-
-export const IngredientsList = ({ ingredients }: IngredientsProps) => {
+const IngredientList = ({ ingredients }: { ingredients: Ingredient[] }) => {
   return (
-    <div>
-      {ingredients.map((item, index) => (
-        <div key={index} class="mb-4">
-          {"type" in item && formatIngredient(item)}
-          {"ingredients" in item && Array.isArray(item.ingredients) && (
-            <ul class="pl-4 list-disc">
-              {item.ingredients.map((ingredient, idx) => (
-                <li key={idx}>
-                  {formatIngredient(ingredient)}
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
-      ))}
-    </div>
+    <>
+      {ingredients.map((item, index) => {
+        // Render Ingredient
+        const { type, amount, unit } = item as Ingredient;
+        return (
+          <tr key={index}>
+            <td class="pr-4 py-2">
+              {amount + (typeof unit !== "undefined" ? unit : "")}
+            </td>
+            <td class="px-4 py-2">{type}</td>
+          </tr>
+        );
+      })}
+    </>
   );
 };
+
+const IngredientTable: FunctionalComponent<{ ingredients: Ingredients }> = (
+  { ingredients },
+) => {
+  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>
+                <IngredientList ingredients={groupIngredients} />
+              </>
+            );
+          } else {
+            // Render Ingredient
+            const { type, amount, unit } = item as Ingredient;
+            return (
+              <tr key={index}>
+                <td class="pr-4 py-2">
+                  {(amount ? amount : "") +
+                    (unit ? (" " + unit) : "")}
+                </td>
+                <td class="px-4 py-2">{type}</td>
+              </tr>
+            );
+          }
+        })}
+      </tbody>
+    </table>
+  );
+};
+export const IngredientsList = ({ ingredients }: IngredientsProps) => {
+  return <IngredientTable ingredients={ingredients} />;
+};

components/RecipeCard.tsx

@@ -1,4 +1,3 @@
-import { Document } from "../lib/documents.ts";
 import { Recipe } from "../lib/recipes.ts";
 
 export function RecipeCard({ recipe }: { recipe: Recipe }) {
@@ -6,20 +5,25 @@ export function RecipeCard({ recipe }: { recipe: Recipe }) {
     <a
       href={`/recipes/${recipe.id}`}
       style={{
-        backgroundImage: `url(${recipe?.meta?.image})`,
+        backgroundImage: `url(${
+          recipe?.meta?.image || "/api/recipes/images/placeholder.jpg"
+        }?width=200&height=200)`,
         backgroundSize: "cover",
       }}
-      class="bg-gray-900 text-white rounded-3xl shadow-md p-4 
-flex flex-col justify-between
-      lg:w-56 lg:h-56 
-      sm:w-40 sm:h-40 
-      w-32 h-32"
+      class="bg-gray-900 text-white rounded-3xl shadow-md p-4 relative overflow-hidden 
+  lg:w-56 lg:h-56 
+  sm:w-40 sm:h-40 
+  w-32 h-32"
     >
-      <div>
-      </div>
-      <div class="mt-2 ">
-        {recipe.name}
+      <div class="h-full flex flex-col justify-between relative z-10">
+        <div>
+          {/* Recipe Card content */}
+        </div>
+        <div class="mt-2">
+          {recipe.name}
+        </div>
       </div>
+      <div class="absolute inset-x-0 bottom-0 h-3/4 bg-gradient-to-t from-black to-transparent" />
     </a>
   );
 }

components/RecipeHero.tsx

@@ -4,14 +4,14 @@ export function RecipeHero({ recipe }: { recipe: Recipe }) {
   return (
     <div class="relative w-full h-[400px] rounded-3xl overflow-hidden bg-black">
       <img
-        src={recipe?.meta?.image}
+        src={recipe?.meta?.image + "?width=800"}
         alt="Recipe Banner"
         class="object-cover w-full h-full"
       />
 
-      <div class="absolute top-4 left-4">
+      <div class="absolute top-4 left-4 pt-4">
         <a
-          class="px-4 py-2 bg-gray-300 text-gray-800 rounded-lg"
+          class="px-4 ml-4 py-2 bg-gray-300 text-gray-800 rounded-lg"
           href="/recipes"
         >
           Back
@@ -19,8 +19,8 @@ export function RecipeHero({ recipe }: { recipe: Recipe }) {
       </div>
 
       <div
-        class="absolute inset-x-0 bottom-0 py-4 px-12 py-8"
-        style={{ background: "linear-gradient(0deg, #fffe, #fff0)" }}
+        class="absolute inset-x-0 bottom-0 py-4 px-8 py-8"
+        style={{ background: "linear-gradient(#0000, #fff9)" }}
       >
         <h2 class="text-4xl font-bold mt-4" style={{ color: "#1F1F1F" }}>
           {recipe.name}