memorium/components/RecipeHero.tsx

import { Recipe } from "../lib/recipes.ts";

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 + "?width=800"}
        alt="Recipe Banner"
        class="object-cover w-full h-full"
      />

      <div class="absolute top-4 left-4 pt-4">
        <a
          class="px-4 ml-4 py-2 bg-gray-300 text-gray-800 rounded-lg"
          href="/recipes"
        >
          Back
        </a>
      </div>

      <div
        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}
        </h2>
      </div>
    </div>
  );
}