102 lines
2.7 KiB
TypeScript
102 lines
2.7 KiB
TypeScript
import { Star } from "@components/Stars.tsx";
|
|
import {
|
|
IconArrowNarrowLeft,
|
|
IconEdit,
|
|
IconExternalLink,
|
|
} from "@components/icons.tsx";
|
|
import Image from "@components/Image.tsx";
|
|
|
|
export function RecipeHero(
|
|
{ data, subline, backlink, editLink }: {
|
|
backlink: string;
|
|
subline?: string[];
|
|
editLink?: string;
|
|
data: {
|
|
meta?: { thumbnail?: string; image?: string; link?: string };
|
|
name: string;
|
|
};
|
|
},
|
|
) {
|
|
const { meta: { image } = {} } = data;
|
|
|
|
return (
|
|
<div
|
|
class={`flex justify-between flex-col relative w-full min-h-[${
|
|
image ? 400 : 200
|
|
}px] rounded-3xl overflow-hidden`}
|
|
>
|
|
{image &&
|
|
(
|
|
<Image
|
|
src={image}
|
|
thumbnail={data.meta?.thumbnail}
|
|
alt="Recipe Banner"
|
|
style={{ objectPosition: "0% 25%" }}
|
|
class="absolute object-cover w-full h-full -z-10"
|
|
/>
|
|
)}
|
|
|
|
<div class="flex justify-between mx-8 mt-8">
|
|
<a
|
|
class="px-4 py-2 bg-gray-300 text-gray-800 rounded-lg flex gap-1 items-center"
|
|
href={backlink}
|
|
>
|
|
<IconArrowNarrowLeft class="w-5 h-5" /> Back
|
|
</a>
|
|
{editLink &&
|
|
(
|
|
<a
|
|
class={`px-4 py-2 ${
|
|
image ? "bg-gray-300 text-gray-800" : "text-gray-200"
|
|
} rounded-lg flex gap-1 items-center`}
|
|
href={editLink}
|
|
>
|
|
<IconEdit class="w-5 h-5" />
|
|
</a>
|
|
)}
|
|
</div>
|
|
|
|
<div
|
|
class={`relative inset-x-0 py-4 px-8 ${image ? "py-8" : ""} `}
|
|
>
|
|
<div
|
|
class={`${
|
|
image ? "noisy-gradient" : ""
|
|
} after:opacity-90 flex gap-4 items-center ${image ? "pt-12" : ""}`}
|
|
>
|
|
<h2
|
|
class="relative text-4xl font-bold z-10"
|
|
style={{ color: image ? "#1F1F1F" : "white" }}
|
|
>
|
|
{data.name}
|
|
{data.meta?.link &&
|
|
(
|
|
<a
|
|
href={data.meta.link}
|
|
target="__blank"
|
|
class="p-2 inline-flex"
|
|
name="Link to Original recipe"
|
|
>
|
|
<IconExternalLink />
|
|
</a>
|
|
)}
|
|
</h2>
|
|
|
|
{data.meta?.rating && <Star rating={data.meta.rating} />}
|
|
</div>
|
|
{subline?.length &&
|
|
(
|
|
<div
|
|
class={`relative z-50 flex gap-5 font-sm text-light mt-3`}
|
|
style={{ color: image ? "#1F1F1F" : "white" }}
|
|
>
|
|
{subline.filter((s) => s && s?.length > 1).map((s) => {
|
|
return <span>{s}</span>;
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|