32 lines
812 B
TypeScript
32 lines
812 B
TypeScript
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}
|
|
alt="Recipe Banner"
|
|
class="object-cover w-full h-full"
|
|
/>
|
|
|
|
<div class="absolute top-4 left-4">
|
|
<a
|
|
class="px-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-12 py-8"
|
|
style={{ background: "linear-gradient(0deg, #fffe, #fff0)" }}
|
|
>
|
|
<h2 class="text-4xl font-bold mt-4" style={{ color: "#1F1F1F" }}>
|
|
{recipe.name}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|