66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import { isYoutubeLink } from "@lib/string.ts";
|
|
import { IconBrandYoutube } from "@components/icons.tsx";
|
|
|
|
export function Card(
|
|
{ link, title, image, thumbnail, backgroundSize = 100 }: {
|
|
backgroundSize?: number;
|
|
thumbnail?: string;
|
|
link?: string;
|
|
title?: string;
|
|
image?: string;
|
|
},
|
|
) {
|
|
const backgroundStyle = {
|
|
backgroundSize: "cover",
|
|
boxShadow: "0px -60px 90px black inset, 0px 10px 20px #fff1 inset",
|
|
};
|
|
|
|
if (backgroundSize !== 100) {
|
|
backgroundStyle["backgroundSize"] = `${backgroundSize}%`;
|
|
backgroundStyle["backgroundRepeat"] = "no-repeat";
|
|
backgroundStyle["backgroundPosition"] = "center";
|
|
}
|
|
|
|
return (
|
|
<a
|
|
href={link}
|
|
style={backgroundStyle}
|
|
data-thumb={thumbnail}
|
|
class="text-white rounded-3xl shadow-md relative
|
|
lg:w-56 lg:h-56
|
|
sm:w-48 sm:h-48
|
|
w-[37vw] h-[37vw]"
|
|
>
|
|
{true && (
|
|
<img
|
|
class="absolute rounded-3xl top-0 left-0 object-cover w-full h-full"
|
|
data-thumb-img
|
|
loading="lazy"
|
|
src={image || "/placeholder.svg"}
|
|
/>
|
|
)}
|
|
<div
|
|
class="p-4 flex flex-col justify-between relative z-10"
|
|
style={{
|
|
outline: "solid 2px #141218",
|
|
borderRadius: "1.4rem",
|
|
height: "calc(100% + 0.5px)",
|
|
width: "calc(100% + 0.5px)",
|
|
marginTop: "-0.5px",
|
|
marginLeft: "-0.5px",
|
|
boxShadow: "0px -60px 90px black inset, 0px 10px 20px #fff1 inset",
|
|
}}
|
|
>
|
|
<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" />
|
|
</a>
|
|
);
|
|
}
|