73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
import { Recipe } from "@lib/recipes.ts";
|
|
|
|
import IconExternalLink from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/external-link.tsx";
|
|
import { Star } from "@components/Stars.tsx";
|
|
export function RecipeHero(
|
|
{ data, backlink }: {
|
|
backlink: string;
|
|
data: { meta?: { image?: string; link?: string }; name: string };
|
|
},
|
|
) {
|
|
const { meta: { image } = {} } = data;
|
|
|
|
const imageUrl =
|
|
(image?.startsWith("Recipes/images/") || image?.startsWith("Media/movies/"))
|
|
? `/api/images?image=${image}&width=800`
|
|
: image;
|
|
|
|
return (
|
|
<div
|
|
class={`relative w-full h-[${
|
|
imageUrl ? 400 : 200
|
|
}px] rounded-3xl overflow-hidden`}
|
|
>
|
|
{imageUrl &&
|
|
(
|
|
<img
|
|
src={imageUrl}
|
|
alt="Recipe Banner"
|
|
class="object-cover w-full h-full"
|
|
/>
|
|
)}
|
|
|
|
<div class="absolute top-8 left-8 ">
|
|
<a
|
|
class="px-4 py-2 bg-gray-300 text-gray-800 rounded-lg block"
|
|
href={backlink}
|
|
>
|
|
Back
|
|
</a>
|
|
</div>
|
|
|
|
{data.meta?.link &&
|
|
(
|
|
<div class="absolute top-8 right-8 ">
|
|
<a
|
|
href={data.meta.link}
|
|
target="__blank"
|
|
class="p-2 ml-4 bg-gray-300 text-gray-800 rounded-lg flex"
|
|
name="Link to Original recipe"
|
|
>
|
|
<IconExternalLink />
|
|
</a>
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
class={`absolute inset-x-0 bottom-0 py-4 px-8 py-8 ${
|
|
imageUrl ? "noisy-gradient" : ""
|
|
} flex gap-4 items-center pt-12`}
|
|
>
|
|
<h2
|
|
class="relative text-4xl font-bold z-10"
|
|
style={{ color: imageUrl ? "#1F1F1F" : "white" }}
|
|
>
|
|
{data.name}
|
|
</h2>
|
|
|
|
{data.meta?.rating && <Star rating={data.meta.rating} />}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|