89 lines
2.7 KiB
TypeScript
89 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
|
|
type FeatureCardProps = {
|
|
title?: string;
|
|
content?: string;
|
|
imageLightSrc?: string;
|
|
imageDarkSrc?: string;
|
|
/**
|
|
* Deprecated: prefer imageLightSrc and imageDarkSrc
|
|
*/
|
|
imageSrc?: string;
|
|
};
|
|
|
|
export function FeatureCard({
|
|
title,
|
|
content,
|
|
imageLightSrc,
|
|
imageDarkSrc,
|
|
imageSrc,
|
|
}: FeatureCardProps) {
|
|
return (
|
|
<div className="rounded-[18px] bg-primary/20 p-1 ">
|
|
<div className="h-full rounded-[14px] bg-primary/20 p-0.5 shadow-sm">
|
|
<div className="bg-background rounded-xl h-full flex flex-col">
|
|
<div className="relative w-full aspect-[16/9] rounded-t-xl overflow-hidden">
|
|
{imageLightSrc || imageDarkSrc ? (
|
|
<>
|
|
<Image
|
|
src={(imageLightSrc || imageDarkSrc)!}
|
|
alt={title || "Feature image"}
|
|
fill
|
|
className="object-cover dark:hidden rounded-t-xl"
|
|
priority={false}
|
|
/>
|
|
<Image
|
|
src={(imageDarkSrc || imageLightSrc)!}
|
|
alt={title || "Feature image"}
|
|
fill
|
|
className="object-cover hidden dark:block rounded-t-xl"
|
|
priority={false}
|
|
/>
|
|
</>
|
|
) : imageSrc ? (
|
|
<Image
|
|
src={imageSrc}
|
|
alt={title || "Feature image"}
|
|
fill
|
|
className="object-cover rounded-t-xl"
|
|
priority={false}
|
|
/>
|
|
) : (
|
|
<>
|
|
<Image
|
|
src="/hero-light.png"
|
|
alt="Feature image"
|
|
fill
|
|
className="object-cover dark:hidden rounded-t-xl"
|
|
priority={false}
|
|
/>
|
|
<Image
|
|
src="/hero-dark.png"
|
|
alt="Feature image"
|
|
fill
|
|
className="object-cover hidden dark:block rounded-t-xl"
|
|
priority={false}
|
|
/>
|
|
</>
|
|
)}
|
|
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-12 sm:h-16 bg-gradient-to-b from-transparent via-background/60 to-background" />
|
|
</div>
|
|
|
|
<div className="p-5 flex-1 flex flex-col">
|
|
<h3 className="text-base sm:text-lg text-primary font-sans">
|
|
{title || ""}
|
|
</h3>
|
|
{content ? (
|
|
<p className="mt-2 text-sm leading-relaxed">{content}</p>
|
|
) : (
|
|
<div className="mt-2 text-sm text-muted-foreground min-h-[1.5rem]"></div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|