Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | "use client";
import Image from "next/image";
import Link from "next/link";
import type { HeroFeatureCardData } from "./types";
interface HeroFeatureCardProps {
card: HeroFeatureCardData;
/** Mark image as priority for LCP optimization */
priority?: boolean;
}
const HeroFeatureCard = ({ card, priority = false }: HeroFeatureCardProps) => {
const formatPrice = (price: number) => {
return new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
minimumFractionDigits: 0,
maximumFractionDigits: 0}).format(price);
};
const hasDiscount = card.product.discountedPrice && card.product.discountedPrice < card.product.price;
return (
<Link href={`/product/${card.product.slug}`}>
<div className="w-full relative rounded-[10px] bg-white dark:bg-gray-800 p-4 sm:p-7.5 hover:shadow-lg transition-shadow duration-200">
<div className="flex items-center gap-6 sm:gap-14">
<div className="flex-1 min-w-0">
<h3 className="max-w-[153px] font-semibold text-dark dark:text-gray-100 text-xl mb-12 sm:mb-20 line-clamp-2">
{card.title}
</h3>
<div>
<p className="font-medium text-dark-4 dark:text-gray-400 text-custom-sm mb-1.5">
{card.subtitle}
</p>
<span className="flex items-center gap-3">
<span className="font-medium text-heading-5 text-red dark:text-red-400">
{hasDiscount
? formatPrice(card.product.discountedPrice!)
: formatPrice(card.product.price)}
</span>
{hasDiscount && (
<span className="font-medium text-2xl text-dark-3 dark:text-gray-400 line-through">
{formatPrice(card.product.price)}
</span>
)}
</span>
</div>
</div>
<div className="flex-shrink-0 w-[80px] h-[100px] sm:w-[123px] sm:h-[161px]">
{card.product.image ? (
<Image
src={card.product.image.url}
alt={card.title}
width={123}
height={161}
className="object-contain w-full h-full"
priority={priority}
/>
) : (
<div className="w-full h-full bg-gray-200 dark:bg-gray-700 rounded flex items-center justify-center">
<span className="text-gray-400 text-xs sm:text-sm">No image</span>
</div>
)}
</div>
</div>
</div>
</Link>
);
};
export default HeroFeatureCard;
|