Compare Component

A React component for comparing products.

Installation

Use the package manager npm or yarn to install the component.

npm install @bolttech/frontend-foundations @bolttech/molecules-compare

or

yarn add @bolttech/frontend-foundations @bolttech/molecules-compare

Props

The Compare component accepts the following properties:

| Prop | Type | Description | |----------------------|---------------|----------------------------------------------------------------------------------| | title | string | The title for the comparison section. | | productsSelected | array | An array of selected products to be compared. | | btnCompareTitle | string | The title for the compare button. | | btnCloseTitle | string | The title for the close button. | | btnCloseModalTitle | string | The title for the close button in the modal. | | onClose | function | Callback to be called when the close button is clicked. | | onRemove | function | Callback to be called when a product is removed. |

Usage

import React, { useState } from 'react';
import { BolttechThemeProvider, bolttechTheme } from '@bolttech/frontend-foundations';
import Compare from '@bolltech/molecules-compare';

const ExampleComponent = () => {
  const products = [
    // Array of selected products for comparison
  ];

  const handleRemoveProduct = (productId) => {
    // Logic to remove a product from comparison
  };

  const handleClose = () => {
    // Logic to handle the close action
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Compare
        title="Product Comparison"
        productsSelected={products}
        btnCompareTitle="Compare"
        btnCloseTitle="Close"
        btnCloseModalTitle="Close Modal"
        onClose={handleClose}
        onRemove={handleRemoveProduct}
      />
    </BolttechThemeProvider>
  );
};

export default ExampleComponent;

Contributing

Contributions are welcome! For any bug fixes, improvements, or new features, please open an issue or submit a pull request.

Please make sure to follow the code standards and test your changes before submitting.