To develop

Available Scripts

In the project directory, you run: Start storybook

yarn storybook

Try to build js

yarn rollup

Public to npmjs

yarn deploy

Runs the app in the development mode.
Open http://localhost:6006 to view it in the browser.

To use

Installation

  npm i @clikvn/otrip-ui-library

or

  yarn add @clikvn/otrip-ui-library

Link NPM

https://www.npmjs.com/package/@clikvn/otrip-ui-library

Usage/Examples

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