# Climatetrade Components
## Usage

Installation.

```bash
npm i @climatetradecarbon/climatetrade-components
```

Add icons in your index.html
```html
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">

```

Add styles in some global styles file

```scss
@import '@climatetradecarbon/climatetrade-components/index.css';
```

Example use Button

```tsx
import { Button } from '@climatetradecarbon/climatetrade-components';
export function MyCustomComponent() {
  return <Button variant={'next'}>Hello world!</Button>
}
```

## Gallery Component
Component for displaying images in a gallery with a Visor and Thumbnails of images.

| Prop     | Type           | Description                                                                                  |
| -------- | -------------- | -------------------------------------------------------------------------------------------- |
| width    | string         | Width of the gallery                                                                         |
| height   | string         | Height of visor                                                                              |
| size     | GallerySizes   | Mode of render images                                                                        |
| images   | GalleryImage[] | List of images resources                                                                     |
| limit    | number         | Define the number of images to render                                                        |
| onSelect | () => void     | Define an injected callback for custom functionality when the user select an image           |
| onToggle | () => void     | Define an injected callback for custom functionality when the user click on show more button |

Example:
```tsx
<Gallery
  images={[
      '/1.jpg',
      '/2.jpg',
      '/3.jpg',
      '/4.jpg',
      '/5.jpg',
      '/6.jpg',
      '/7.jpg',
  ]}
/>
```