memorium/components/Card.tsx

import { isYoutubeLink } from "@lib/string.ts";
import { IconBrandYoutube } from "@components/icons.tsx";

export function Card(
  { link, title, image }: { link?: string; title?: string; image?: string },
) {
  return (
    <a
      href={link}
      style={{
        backgroundImage: `url(${image})`,
        backgroundSize: "cover",
        //background: "#2B2930",
      }}
      class="text-white rounded-3xl shadow-md p-4 relative overflow-hidden 
  lg:w-56 lg:h-56 
  sm:w-48 sm:h-48
  w-[37vw] h-[37vw]"
    >
      <div class="h-full flex flex-col justify-between relative z-10">
        <div>
          {/* Recipe Card content */}
        </div>
        <div class="mt-2 flex items-center gap-2">
          {isYoutubeLink(link || "") && <IconBrandYoutube />}
          {title}
        </div>
      </div>
      <div
        class="absolute inset-x-0 bottom-0 h-3/4"
        style={{ background: "linear-gradient(transparent, #000e)" }}
      />
    </a>
  );
}