vercel__flags/examples/partial-prerendering/components/product-card.tsx

import { dinero, type DineroSnapshot } from 'dinero.js';
import Image from 'next/image';
import type { Product } from '#/types/product';
import { ProductBestSeller } from '#/components/product-best-seller';
import { ProductEstimatedArrival } from '#/components/product-estimated-arrival';
import { ProductLowStockWarning } from '#/components/product-low-stock-warning';
import { ProductPrice } from '#/components/product-price';
import { ProductRating } from '#/components/product-rating';
import { ProductUsedPrice } from '#/components/product-used-price';

export const ProductCard = ({
  product,
  showRating,
}: {
  product: Product;
  showRating: boolean;
}) => {
  const price = dinero(product.price as DineroSnapshot<number>);

  return (
    <div className="group block">
      <div className="space-y-2">
        <div className="relative aspect-square">
          {product.isBestSeller ? (
            <div className="absolute left-2 top-2 z-10 flex">
              <ProductBestSeller />
            </div>
          ) : null}
          <Image
            src={`/${product.image}`}
            fill
            sizes="(min-width: 1184px) 200px, (min-width: 1024px) 20vw, (min-width: 768px) 25vw, 50vw"
            className="rounded-xl grayscale group-hover:opacity-80"
            alt={product.name}
            placeholder="blur"
            blurDataURL={product.imageBlur}
          />
        </div>

        <div className="truncate text-sm font-medium text-white group-hover:text-vercel-cyan">
          {product.name}
        </div>

        {showRating && product.rating ? (
          <ProductRating rating={product.rating} />
        ) : null}

        <ProductPrice price={price} discount={product.discount} />

        {product.usedPrice ? (
          <ProductUsedPrice usedPrice={product.usedPrice} />
        ) : null}

        <ProductEstimatedArrival leadTime={product.leadTime} />

        {product.stock <= 1 ? (
          <ProductLowStockWarning stock={product.stock} />
        ) : null}
      </div>
    </div>
  );
};