Skip to main content

View Product Block

The ViewProduct Component is a fully customizable product display component built with TypeScript. It provides a complete interface for viewing product details including organization information, product images, chips, tags, sections, and customizable actions with modern design patterns.

πŸš€ Installation​

npm install @nodeblocks/frontend-view-product-block@0.1.4

πŸ“– Usage​

import {ViewProduct} from '@nodeblocks/frontend-view-product-block';
function BasicViewProduct() {
  const chips = [
    { label: 'New' },
    { label: 'Featured' }
  ];

  const tags = [
    { icon: 'star', label: 'Premium' },
    { label: ['Electronics', 'Mobile'] }
  ];

  const sections = [
    { icon: 'info', label: 'Model', value: 'iPhone 15 Pro' },
    { icon: 'attach_money', label: 'Price', value: '$999' },
    { label: 'Availability', value: 'In Stock' }
  ];

  const actions = [
    { label: 'Add to Cart', onClick: () => console.log('Added to cart') },
    { label: 'Buy Now', onClick: () => console.log('Buy now clicked') }
  ];

  return (
    <ViewProduct
      organizationName="TechStore"
      organizationBannerLink="#organization/techstore"
      organizationLogoUrl="/img/icon.png"
      imageUrl="/img/undraw_docusaurus_react.svg"
      imageAlt="iPhone 15 Pro"
      chips={chips}
      headerTitle="iPhone 15 Pro - Latest Model"
      tags={tags}
      sections={sections}
      actions={actions}
      style={{backgroundColor: 'white', padding: '16px'}}>
      <ViewProduct.Header>
        <ViewProduct.CompanyName />
        <ViewProduct.Image />
        <ViewProduct.Chips />
        <ViewProduct.Title />
      </ViewProduct.Header>
      <ViewProduct.Content />
      <ViewProduct.Actions />
    </ViewProduct>
  );
}

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
organizationNamestringundefinedName of the organization selling the product
organizationBannerLinkstringundefinedURL link for the organization banner
organizationLogoUrlstringundefinedURL for the organization logo image
imageUrlstringRequiredSource URL for the main product image
imageAltstringundefinedAlt text for the product image
chipsArray<{label: string}>RequiredArray of chip labels to display
headerTitlestringRequiredMain title text for the product
tagsArray<{icon?: IconType, label: string | string[]}>RequiredArray of tags with optional icons
sectionsArray<{icon?: IconType, label: string, value: string}>RequiredArray of information sections
actionsArray<{label: ReactNode, onClick: () => void}>undefinedArray of action buttons
classNamestringundefinedAdditional CSS class name for styling the container
childrenBlocksOverrideundefinedCustom block components to override default rendering

Note: This component inherits all HTML div element props.

Sub-Components​

The ViewProduct component provides several sub-components for different sections. All sub-components receive their default values from the main component's context and can override these values through props.

ViewProduct.CompanyName​

Displays the organization name as a heading.

PropTypeDefaultDescription
childrenReactNodeFrom contextCustom content to override default company name
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML div element props.

ViewProduct.Image​

Displays the main product image.

PropTypeDefaultDescription
imageUrlstringFrom contextSource URL for the product image
imageAltstringFrom contextAlt text for the product image
childrenReactNodeFrom contextCustom content to override default image
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML div element props.

ViewProduct.Chips​

Container for displaying product chips.

PropTypeDefaultDescription
chipsArray<{label: string}>From contextArray of chips to display
childrenReactNodeFrom contextCustom content to override default chips
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML div element props.

ViewProduct.Title​

Displays the product title as a heading.

PropTypeDefaultDescription
childrenReactNodeFrom contextCustom content to override default title
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML div element props.

ViewProduct.Header​

Container for the product header including company name, image, chips, and title.

PropTypeDefaultDescription
organizationNamestringFrom contextOrganization name for the header
organizationLogostringFrom contextOrganization logo URL
organizationBannerLinkstringFrom contextOrganization banner link
imageUrlstringFrom contextProduct image URL
imageAltstringFrom contextProduct image alt text
chipsArray<{label: string}>From contextArray of chips
headerTitlestringFrom contextProduct title
childrenReactNodeFrom contextCustom content to override default header content
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML div element props.

ViewProduct.Sections​

Container that displays multiple information sections.

PropTypeDefaultDescription
sectionsArray<{icon?: IconType, label: string, value: string}>From contextArray of sections to display
childrenReactNodeFrom contextCustom content to override default sections
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML div element props.

ViewProduct.Tags​

Container for displaying product tags.

PropTypeDefaultDescription
tagsArray<{icon?: IconType, label: string | string[]}>From contextArray of tags to display
childrenReactNodeFrom contextCustom content to override default tags
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML div element props.

ViewProduct.CompanyBanner​

Displays a clickable banner for the organization.

PropTypeDefaultDescription
companyNameReactNodeFrom contextCompany name to display
linkstringFrom contextURL for the banner link
iconenumundefinedOptional icon for the banner
logostringFrom contextLogo URL for the banner
childrenReactNodeFrom contextCustom content to override default banner
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML a element props.

ViewProduct.Content​

Container for the main product content including tags, sections, and company banner.

PropTypeDefaultDescription
tagsArray<{icon?: IconType, label: string | string[]}>From contextArray of tags
sectionsArray<{icon?: IconType, label: string, value: string}>From contextArray of sections
organizationNamestringFrom contextOrganization name
organizationBannerLinkstringFrom contextOrganization banner link
organizationLogoUrlstringFrom contextOrganization logo URL
childrenReactNodeFrom contextCustom content to override default content
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML div element props.

ViewProduct.Actions​

Container for action buttons.

PropTypeDefaultDescription
actionsArray<{label: ReactNode, onClick: () => void}>From contextArray of action buttons
childrenReactNodeFrom contextCustom content to override default actions
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML div element props.

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import ViewProduct from '@nodeblocks/frontend-view-product-block';
import { ReactNode } from 'react';

interface ProductChip {
  label: string;
}

interface ProductTag {
  icon?: IconType;
  label: string | string[];
}

interface ProductSection {
  icon?: IconType;
  label: string;
  value: string;
}

interface ProductAction {
  label: ReactNode;
  onClick: () => void;
}

interface ViewProductProps {
  organizationName?: string;
  organizationBannerLink?: string;
  organizationLogoUrl?: string;
  imageUrl: string;
  imageAlt?: string;
  chips: ProductChip[];
  headerTitle: string;
  tags: ProductTag[];
  sections: ProductSection[];
  actions?: ProductAction[];
  className?: string;
  children?: ReactNode;
}

interface CustomProductData {
  id: string;
  name: string;
  price: number;
  category: string;
  brand: string;
  availability: 'in-stock' | 'out-of-stock' | 'pre-order';
  rating: number;
  features: string[];
  specifications: {
    [key: string]: string;
  };
}

const ProductDetailsView = () => {
  const productData: CustomProductData = {
    id: 'PROD-2024-001',
    name: 'Premium Wireless Headphones',
    price: 299.99,
    category: 'Electronics',
    brand: 'AudioTech',
    availability: 'in-stock',
    rating: 4.8,
    features: ['Noise Cancellation', 'Bluetooth 5.0', 'Fast Charging'],
    specifications: {
      'Battery Life': '30 hours',
      'Driver Size': '40mm',
      'Weight': '250g'
    }
  };

  const chips: ProductChip[] = [
    { label: 'Best Seller' },
    { label: 'Free Shipping' }
  ];

  const tags: ProductTag[] = [
    { icon: 'star', label: `${productData.rating} Rating` },
    { label: productData.features }
  ];

  const sections: ProductSection[] = [
    { icon: 'info', label: 'Brand', value: productData.brand },
    { icon: 'category', label: 'Category', value: productData.category },
    { icon: 'attach_money', label: 'Price', value: `$${productData.price}` },
    { icon: 'inventory', label: 'Availability', value: productData.availability },
    ...Object.entries(productData.specifications).map(([key, value]) => ({
      label: key,
      value: value
    }))
  ];

  const actions: ProductAction[] = [
    { 
      label: 'Add to Cart', 
      onClick: () => console.log(`Added ${productData.name} to cart`) 
    },
    { 
      label: 'Buy Now', 
      onClick: () => console.log(`Purchasing ${productData.name}`) 
    }
  ];

  return (
    <ViewProduct
      organizationName="AudioTech Store"
      organizationBannerLink="/brands/audiotech"
      organizationLogoUrl="/audiotech-logo.png"
      imageUrl="/headphones-image.jpg"
      imageAlt={productData.name}
      chips={chips}
      headerTitle={productData.name}
      tags={tags}
      sections={sections}
      actions={actions}
      className="custom-product-view">
      <ViewProduct.Header />
      <ViewProduct.Content />
      <ViewProduct.Actions />
    </ViewProduct>
  );
};

// Custom component overrides with TypeScript
const CustomProductView = () => {
  const customChips: ProductChip[] = [
    { label: 'Limited Edition' },
    { label: '24h Delivery' }
  ];

  const customTags: ProductTag[] = [
    { icon: 'local_fire_department', label: 'Hot Deal' },
    { icon: 'verified', label: ['Certified', 'Warranty Included'] }
  ];

  const customSections: ProductSection[] = [
    { icon: 'timer', label: 'Delivery Time', value: '24 hours' },
    { icon: 'local_shipping', label: 'Shipping', value: 'Free' },
    { 
      icon: 'support_agent', 
      label: 'Support', 
      value: '24/7 Customer Service' 
    }
  ];

  return (
    <ViewProduct
      organizationName="Premium Electronics"
      headerTitle="Exclusive Gaming Headset"
      imageUrl="/gaming-headset.jpg"
      chips={customChips}
      tags={customTags}
      sections={customSections}>
      <ViewProduct.Header className="custom-header">
        <ViewProduct.CompanyName />
        <div className="custom-image-container">
          <ViewProduct.Image />
        </div>
        <ViewProduct.Chips />
        <ViewProduct.Title />
      </ViewProduct.Header>
      
      <ViewProduct.Content>
        <div className="custom-content-layout">
          <ViewProduct.Tags />
          <ViewProduct.Sections />
          <ViewProduct.CompanyBanner />
        </div>
      </ViewProduct.Content>
      
      <ViewProduct.Actions />
    </ViewProduct>
  );
};

Built with ❀️ using modern web standards.