Simple Product Tile

This page illustrates composing @hv/commerce/ui components to render a simple product tile.

Components Used

• <ProductImage />
• <ProductName />

Example

Preview

VividLux OLED TV

Code

import { ProductImage, ProductName } from '@hv/commerce/ui/product';
import * as SimpleProductTileUI from '@hv/commerce/ui/simple-product-tile';
import { ProductStaticProvider } from '@hv/commerce/ui/product-static-provider';

export const SimpleProductTile = ({ product, variationProducts }) => {
  if (!product) {
    return null;
  }

  return (
    <ProductStaticProvider
      product={product}
      variationProducts={variationProducts}
    >
      <SimpleProductTileUI.Content>
        <ProductImage isLink className={'hover:scale-105'} />
        <SimpleProductTileUI.Actions>
          <ProductName isLink />
        </SimpleProductTileUI.Actions>
      </SimpleProductTileUI.Content>
    </ProductStaticProvider>
  );
};

export default SimpleProductTile;