# To develop
## Available Scripts


use node 16
In the project directory, you run:
Start storybook

```bash
yarn storybook
```
Try to build js

```bash
yarn rollup
```
Public to npmjs

```bash
yarn deploy
```

Runs the app in the development mode.\
Open [http://localhost:6006](http://localhost:6006) to view it in the browser.

# To use
## Installation

```bash
  npm i @clikvn/otrip-ui-library
```

or

```bash
  yarn add @clikvn/otrip-ui-library
```

## Link NPM 
https://www.npmjs.com/package/@clikvn/otrip-ui-library
    
## Usage/Examples

```javascript
import { MobileLayout } from "@clikvn/otrip-ui-library";
import "@clikvn/otrip-ui-library/dist/cjs/style.css";
import '@clikvn/otrip-ui-library/dist/icon.css';

function App() {

  const data = {
    tag: "Historical",
    imageSrc: "https://clikhub.s3.ap-southeast-1.amazonaws.com/ci/storage/NJJTULTJJWUK/Image_3W6RULTJJWUK.png",
    subTitle: " Nha Trang, Vietnam | Historical Nha Trang,",
    title: " Central Tower, Nagar Central Tower, NagarCentral Tower, NagarCentral",
    description: "Iconic landmark in District 1 and is known for its stunning neo-Romanesque architecture. It was buil Iconic landmark in District 1 and is known for its stunning neo-Romanesque architecture. It was buil"
  }

const propsMobileLayout = {
  className: "",
  headerDescription:"Explore popular destinations and start planning your trip.",
  headerTitle:"Start exploring",
  inputProps: {placeholder: "Where will you discover next?", onChange: ()=>{}},
  tabsProps: {items: [
      {
        label: "Attraction",
        value: "attraction",
        icon: "otrip-ui-icon-map-points-2",
      },
      { label: "Itineraries", value: "itineraries", icon: "otrip-ui-icon-route-3" },
      { label: "Bus tour", value: "bus-tour", icon: "otrip-ui-icon-bus" },
      { label: "City tour", value: "city-tour", icon: "otrip-ui-icon-city" },
      {
        label: "Travel Blog",
        value: "travel-blog",
        icon: "otrip-ui-icon-blog",
        disabled: true,
      },
    ],
    active: "attraction",
    block: true,
    onChange: (value: string)=>{}
  },
  affixContent: true,
  targetAffix: () => HTMLElement;
  }
  
 
  return 
      <MobileLayout 
        {...propsMobileLayout}
         >
        <Card {...data}/>
        <Card {...data}/>
        <Card {...data}/>
        <Card {...data}/>
        <Card {...data}/>
        <Card {...data}/>
        <Card {...data}/>
      </MobileLayout>
}
```


## Features