ProductNoThumbnail

Description

A simple SVG placeholder icon displayed when a product has no thumbnail image. Shows a gray box icon to indicate missing product imagery.

Import

import { ProductNoThumbnail } from '@components/common/ProductNoThumbnail';

Usage

import { ProductNoThumbnail } from '@components/common/ProductNoThumbnail';

function ProductCard({ product }) {
  return (
    <div className="product-card">
      {product.image ? (
        <img src={product.image} alt={product.name} />
      ) : (
        <ProductNoThumbnail width={200} height={200} />
      )}
    </div>
  );
}

Props

Name	Type	Default	Description
width	number	100	Width of the SVG in pixels
height	number	100	Height of the SVG in pixels
className	string	-	Additional CSS classes

Example: Product Grid

import { ProductNoThumbnail } from '@components/common/ProductNoThumbnail';

function ProductGrid({ products }) {
  return (
    <div className="grid grid-cols-3 gap-4">
      {products.map(product => (
        <div key={product.id} className="product-item">
          {product.thumbnail ? (
            <img src={product.thumbnail} alt={product.name} />
          ) : (
            <ProductNoThumbnail width={300} height={300} />
          )}
          <h3>{product.name}</h3>
        </div>
      ))}
    </div>
  );
}

Example: With Custom Styling

import { ProductNoThumbnail } from '@components/common/ProductNoThumbnail';

function ProductPlaceholder() {
  return (
    <div className="product-image-container">
      <ProductNoThumbnail 
        width={400} 
        height={400}
        className="opacity-50 bg-gray-100 rounded-lg p-4"
      />
    </div>
  );
}

Related Components

• Image - Optimized image component
• StaticImage - Static asset images