Form Label

Structure html form labels

<label className="text-cap">
    First Name
    <span className="icon-required">(*)</span>
</label>

Form Input

Structure html form Input

<div className="form-group">
    <div className="input-group">
        <input className="form-control" />
    </div>
</div>

Form Select

Structure html form select by React Select

import Select from 'react-select';

<Select
    value={null}
    onChange={(e)=> null}
    options={[]}
    getOptionLabel={({ name }) => name}
    getOptionValue={({ id }) => id}
    classNamePrefix="custom_select_component"
/>

From Datepicker

Structure html form select by React Datepicker

import DatePicker from 'react-datepicker';

<Select
    value={null}
    onChange={(e)=> null}
    options={[]}
    getOptionLabel={({ name }) => name}
    getOptionValue={({ id }) => id}
    classNamePrefix="custom_select_component"
/>

Buttons Action

Structure html status order

• Inherit style button from React Bootstrap

import { Button } from 'react-boostrap'

<Button variant="info">Info</Button>
<Button variant="primary">Primary</Button>
<Button variant="success">Success</Button>
<Button variant="danger">Danger</Button>
<Button variant="dark">Dark</Button>
<Button variant="light">Light</Button>

Status Order

Structure html status order

<div className="custom-status new">
    <i className="fa fa-circle" aria-hidden="true"></i> New Status
</div>

Points Trip

Structure html status order

• To render stoppoin trip with i is index of the loop

<div key={i} className="wrapper-hub-icon">
    <i className={`icon-stoppoint ${i == 0 ? 'circle': 'pin'}`}></i> Location 
</div>

Tabs

Structure html tabs navigation from React Bootstrap

import { Nav, Tab, Table} from 'react-bootstrap';

<Tab.Container defaultActiveKey="first">
    <Nav variant="tabs" className="custom-nav-item">
        <Nav.Item>
            <Nav.Link eventKey="first">Tab 1</Nav.Link>
        </Nav.Item>
        <Nav.Item>
            <Nav.Link eventKey="second">Tab 2</Nav.Link>
        </Nav.Item>
    </Nav>
    <Tab.Content className="custom-tab-content transparent-background">
        <Tab.Pane eventKey="first">
            First
        </Tab.Pane>
        <Tab.Pane eventKey="second">
            Second
        </Tab.Pane>
    </Tab.Content>
</Tab.Container>

Tables

Structure html table by from React Bootstrap

import { Nav, Tab, Table} from 'react-bootstrap';

<Table hover responsive className="custom-table">
    <thead>
        <tr>
            <th>Lorem Ipsum</th>
            <th>Lorem Ipsum</th>
        </tr>
    </thead>
    <tbody>
    {
        lengthOfData > 0 ? data.map(item => 
        <tr key={item.id} className="tr-custom">
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
        </tr>
    ): 
        <tr className="text-center" style={{backgroundColor:'transparent'}}> 
            <td colSpan="2" className="section-empty">
                <div className="icon-empty"><p className="text-empty">Not found data</p></div>
            </td>
        </tr>
    }
    </tbody>
</Table>

Paging

Structure html paging by Paging Component

import Paging from 'paging';

<div className="custom-paging fixed">
    <Paging title="chuyến" paging={{}} numberItem={[]}  />
</div>