memorium/components/RecipeHero.tsx

import { Star } from "@components/Stars.tsx";
import {
  IconArrowNarrowLeft,
  IconEdit,
  IconExternalLink,
} from "@components/icons.tsx";
import { isLocalImage } from "@lib/string.ts";
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;

  const imageUrl = (image && isLocalImage(image))
    ? `/api/images?image=${image}&width=800`
    : image;

  return (
    <div
      class={`flex justify-between flex-col relative w-full min-h-[${
        imageUrl ? 400 : 200
      }px] rounded-3xl overflow-hidden`}
    >
      {imageUrl &&
        (
          <Image
            src={imageUrl}
            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 ${
                imageUrl ? "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 ${imageUrl ? "py-8" : ""} `}
      >
        <div
          class={`${
            imageUrl ? "noisy-gradient" : ""
          } after:opacity-90 flex gap-4 items-center ${
            imageUrl ? "pt-12" : ""
          }`}
        >
          <h2
            class="relative text-4xl font-bold z-10"
            style={{ color: imageUrl ? "#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: imageUrl ? "#1F1F1F" : "white" }}
            >
              {subline.filter((s) => s && s?.length > 1).map((s) => {
                return <span>{s}</span>;
              })}
            </div>
          )}
      </div>
    </div>
  );
}