# @puravidaprime/ecommerce-components

![npm](https://img.shields.io/npm/v/@puravidaprime/ecommerce-components?style=flat-square)

This project provides a collection of static components that can be easily integrated into any application.

## Available Components

- **CookiesBanner**: Displays a banner to inform users about the use of cookies on the website.
  - Properties:
    - `cookieName`: `string` (Default: 'lgpd') - Name of the cookie to check for acceptance.
    - `cookieValue`: `boolean` (Default: true) - Value of the cookie to be set when the user accepts.

- **ProteinCalculator**: Displays a banner to inform users about the use of cookies on the website.
  - Properties:
    - `email`: `string` (Default: 'lgpd') - Name of the cookie to check for acceptance.
    - `api`: `boolean` (Default: true) - Value of the cookie to be set when the user accepts.



## Installation

You can install the package via `yarn` or `npm`:

```bash
yarn add @puravidaprime/ecommerce-components
```
or 
```bash
    npm i @puravidaprime/ecommerce-components
```

## Classic Usage

Alternatively, you can include the library in your HTML file using UNPKG:

```html
<!-- If you are using Classic methods, you have to load React and ReactDOM -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<script defer src="https://unpkg.com/@puravidaprime/ecommerce-components@{CURRENT-VERSION}/lib/@puravidaprime/ecommerce-components.js" />
```

This module exports by default this variable: `puravidalabs`

you can extract from `puravidalabs` like this example:


```html

<div id="cookies-banner-react"></div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
   const CookiesBanner = puravidalabs.CookiesBanner;

    const container = document.getElementById('cookies-banner-react');

    const root = ReactDOM.createRoot(container);

    root.render(React.createElement(CookiesBanner, { cookieName: 'lgpd', cookieValue: true }));    
  });
</script>
```


## Modern Usage

After installing the package, you can import the components into your project:


```javascript
import { CookiesBanner } from '@puravidaprime/ecommerce-components';

export const App = () => {
    return <CookiesBanner cookieName="lgpd" cookieValue={true} />
}
```

Now, you can use the imported components in your application.

Feel free to explore the documentation of each component for more details on usage and available properties.

We hope these components make it easier to develop your application and enhance the user experience! Happy coding!