### Basic Navigation Example

Source: https://miniapp.zaloplatforms.com/documents/zaui/router/ZMPRouter

Example demonstrating the use of useNavigate hook for navigating between pages.

```APIDOC
## Example Usage

This example shows how to use the `useNavigate` hook to navigate from the Home Page to Page 1.

```javascript
import React from "react";
import { Page, Text, Box, Button, useNavigate } from "zmp-ui";

export default function HomePage(props) {
  const navigate = useNavigate();

  return (
    <Page className="section-container">
      <Text.Title style={{ textAlign: "center" }}>Home Page</Text.Title>
      <Box mt={6}>
        <Button
          fullWidth
          variant="secondary"
          onClick={() => {
            navigate("/page1");
          }}
        >
          Go To Page 1
        </Button>
      </Box>
    </Page>
  );
}
```
```

--------------------------------

### Snackbar Usage Example

Source: https://miniapp.zaloplatforms.com/documents/zaui/1.7.0/Snackbar

Demonstrates how to import and use the useSnackbar hook to open and manage snackbars. Includes setup for closing snackbars on component unmount.

```javascript
import React, { useRef, useEffect } from "react";
import { useSnackbar, Button, Page, Box, Text } from "zmp-ui";

export default function HomePage() {
  const { openSnackbar, setDownloadProgress, closeSnackbar } = useSnackbar();
  const timmerId = useRef();

  useEffect(
    () => () => {
      closeSnackbar();
      clearInterval(timmerId.current);
    },
    []
  );

  return (
    <Page className="section-container">
      <Text.Title size="small">Snackbar</Text.Title>

```

--------------------------------

### Install Zalo Mini App CLI

Source: https://miniapp.zaloplatforms.com/documents/devtools/cli/intro

Install the Zalo Mini App CLI globally using npm. Ensure Node.js is installed beforehand.

```bash
npm install -g zmp-cli
```

--------------------------------

### Basic List Usage Example

Source: https://miniapp.zaloplatforms.com/documents/zaui/1.10.0/data-display/List

An example demonstrating how to use the List and ListItem components to display a simple list with various configurations.

```APIDOC
## Example Usage

### HomePage.js

```javascript
import React from "react";
import { Page, List, Icon, Button } from "zmp-ui";

const { Item } = List;
export default function HomePage(props) {
  return (
    <Page className="section-container">
      <List>
        <Item title="Title" suffix={<Icon icon="zi-chevron-right" />} />
        <Item
          title="Sample text title"
          prefix={<Icon icon="zi-user" />}
          suffix={<Icon icon="zi-check" />}
        />
        <Item
          title="Title"
          suffix={<Icon icon="zi-chevron-right" />}
          subTitle="subtitle"
        />
        <Item title="Title" prefix={<Icon icon="zi-user" />} />
        <Item title="Title" brackets="Brackets" />
        <Item title="Title" subTitle="Subtitle" />
        <Item
          title="Title"
          subTitle="Subtitle"
          suffix={<Icon icon="zi-chevron-right" />}
        />
      </List>
    </Page>
  );
}
```
```

--------------------------------

### Navigation Example

Source: https://miniapp.zaloplatforms.com/documents/zaui/1.10.0/router/ZMPRouter

Example demonstrating the usage of the useNavigate hook to navigate between pages in a Zalo Mini App.

```APIDOC
## Example Usage

```javascript
import React from "react";
import { Page, Text, Box, Button, useNavigate } from "zmp-ui";

export default function HomePage(props) {
  const navigate = useNavigate();

  return (
    <Page className="section-container">
      <Text.Title style={{ textAlign: "center" }}>Home Page</Text.Title>
      <Box mt={6}>
        <Button
          fullWidth
          variant="secondary"
          onClick={() => {
            navigate("/page1");
          }}
        >
          Go To Page 1
        </Button>
      </Box>
    </Page>
  );
}
```
```

--------------------------------

### Install zmp-sdk

Source: https://miniapp.zaloplatforms.com/documents/api

Install the Zalo Mini App SDK using npm. This is the first step to interact with the Zalo Mini App API.

```bash
npm install zmp-sdk  

```

--------------------------------

### Page Component Example

Source: https://miniapp.zaloplatforms.com/documents/zaui/1.7.0/container/Page

An example demonstrating how to use the Page component with its properties.

```APIDOC
## Example Usage

### HomePage.js

```javascript
import React from "react";
import { Page, Input } from "zmp-ui";

export default function HomePage(props) {
  return (
    <Page className="section-container" hideScrollbar={true}>
      <Input label="Label" helperText="Helper text" />
    </Page>
  );
}
```
```

--------------------------------

### Bottom Navigation Example

Source: https://miniapp.zaloplatforms.com/documents/zaui/navigation/bottom-navigation

Example of how to implement Bottom Navigation in a React application using zmp-ui.

```APIDOC
## Example
HomePage.js
```javascript
import React, { useState } from "react";
import { BottomNavigation, Icon, Page } from "zmp-ui";

const BottomNavigationPage = (props) => {
  const [activeTab, setActiveTab] = useState("chat");
  const { title } = props;
  return (
    <Page className="page">
      <BottomNavigation
        fixed
        activeKey={activeTab}
        onChange={(key) => setActiveTab(key)}
      >
        <BottomNavigation.Item
          key="chat"
          label="Tin Nhắn"
          icon={<Icon icon="zi-chat" />}
          activeIcon={<Icon icon="zi-chat-solid" />}
        />
        <BottomNavigation.Item
          label="Danh bạ"
          key="contact"
          icon={<Icon icon="zi-call" />}
          activeIcon={<Icon icon="zi-call-solid" />}
        />
        <BottomNavigation.Item
          label="Khám phá"
          key="discovery"
          icon={<Icon icon="zi-more-grid" />}
          activeIcon={<Icon icon="zi-more-grid-solid" />}
        />
        <BottomNavigation.Item
          key="timeline"
          label="Nhật ký"
          icon={<Icon icon="zi-clock-1" />}
          activeIcon={<Icon icon="zi-clock-1-solid" />}
        />
        <BottomNavigation.Item
          key="me"
          label="Cá nhân"
          icon={<Icon icon="zi-user" />}
          activeIcon={<Icon icon="zi-user-solid" />}
        />
      </BottomNavigation>
    </Page>
  );
};

export default BottomNavigationPage;

```
```

--------------------------------

### Install zaui-tokens Package

Source: https://miniapp.zaloplatforms.com/documents/zaui/foundation/colors

Install the zaui-tokens package via npm to access color tokens and other design variables.

```bash
npm install zaui-tokens  

```

--------------------------------

### Page Component Usage Example

Source: https://miniapp.zaloplatforms.com/documents/zaui/1.9.0/container/Page

An example demonstrating how to use the Page component with its properties.

```APIDOC
## Example

### HomePage.js

```javascript
import React from "react";
import { Page, Input } from "zmp-ui";

export default function HomePage(props) {
  return (
    <Page className="section-container" hideScrollbar={true}>
      <Input label="Label" helperText="Helper text" />
    </Page>
  );
}
```
```

--------------------------------

### Basic Tabs Example

Source: https://miniapp.zaloplatforms.com/documents/zaui/layout/tabs

A simple example demonstrating the basic usage of the Tabs component with 'Mini Apps', 'Community', and 'Support' as tab items.

```javascript
function App() {
  return (
    <Tabs defaultActiveKey="1">
      <Tabs.TabPane key="1" title="Mini Apps">
        Khám phá
        Mở Zalo, bấm quét QR để quét
        và khám phá Mini Apps trên điện thoại
      </Tabs.TabPane>
      <Tabs.TabPane key="2" title="Community">
        Cộng đồng nhà phát triển Mini App
      </Tabs.TabPane>
      <Tabs.TabPane key="3" title="Hỗ trợ">
        Tham gia nhóm Facebook
      </Tabs.TabPane>
    </Tabs>
  );
}
```

--------------------------------

### Install zmp-ui Package

Source: https://miniapp.zaloplatforms.com/documents/zaui/1.10.0

Use npm to install the zmp-ui package for Zalo Mini App development.

```bash
npm install zmp-ui  

```

--------------------------------

### Default Swiper Example

Source: https://miniapp.zaloplatforms.com/documents/zaui/1.7.0/data-display/Swiper

A basic example demonstrating how to implement a default Swiper component with multiple slides.

```APIDOC
## Example: Swiper Mặc định

```javascript
import React from "";
import { Page, Swiper, Box, Text } from "zmp-ui";

export default function HomePage() {
  return (
    <Page className='section-container'>
      <Text.Title size='small'>Swiper</Text.Title>
      <Box
        mt={6}
        flex
        flexDirection='column'
        justifyContent='center'
        alignItems='center'
      >
        <Swiper>
          <Swiper.Slide>
            <img
              className='slide-img'
              src='https://stc-zmp.zadn.vn/zmp-zaui/images/0e05d63a7a93a6cdff826.jpg'
              alt='slide-1'
            />
          </Swiper.Slide>
          <Swiper.Slide>
            <img
              className='slide-img'
              src='https://stc-zmp.zadn.vn/zmp-zaui/images/0f7c061caab576eb2fa45.jpg'
              alt='slide-2'
            />
          </Swiper.Slide>
          <Swiper.Slide>
            <img
              className='slide-img'
              src='https://stc-zmp.zadn.vn/zmp-zaui/images/321fb45f18f6c4a89de78.jpg'
              alt='slide-3'
            />
          </Swiper.Slide>
          <Swiper.Slide>
            <img
              className='slide-img'
              src='https://stc-zmp.zadn.vn/zmp-zaui/images/4f417921d58809d650997.jpg'
              alt='slide-4'
            />
          </Swiper.Slide>
          <Swiper.Slide>
            <img
              className='slide-img'
              src='https://stc-zmp.zadn.vn/zmp-zaui/images/677fad2e0187ddd984969.jpg'
              alt='slide-5'
            />
          </Swiper.Slide>
        </Swiper>
      </Box>
    </Page>
  );
}
```
```

--------------------------------

### Swiper with Autoplay Example

Source: https://miniapp.zaloplatforms.com/documents/zaui/1.7.0/data-display/Swiper

An example demonstrating how to enable autoplay for the Swiper component, with a specified duration.

```APIDOC
## Example: Swiper autoplay

```javascript
import React from "";
import { Page, Swiper, Box, Text } from "zmp-ui";

export default function HomePage() {
  return (
    <Page className='section-container'>
      <Text.Title size='small'>Swiper</Text.Title>
      <Box
        mt={6}
        flex
        flexDirection='column'
        justifyContent='center'
        alignItems='center'
      >
        <Swiper autoplay duration={2000} loop>
          <Swiper.Slide>
            <img
              className='slide-img'
              src='https://stc-zmp.zadn.vn/zmp-zaui/images/0e05d63a7a93a6cdff826.jpg'
              alt='slide-1'
            />
          </Swiper.Slide>
          <Swiper.Slide>
            <img
              className='slide-img'
              src='https://stc-zmp.zadn.vn/zmp-zaui/images/0f7c061caab576eb2fa45.jpg'
              alt='slide-2'
            />
          </Swiper.Slide>
          <Swiper.Slide>
            <img
              className='slide-img'
              src='https://stc-zmp.zadn.vn/zmp-zaui/images/321fb45f18f6c4a89de78.jpg'
              alt='slide-3'
            />
          </Swiper.Slide>
          <Swiper.Slide>
            <img
              className='slide-img'
              src='https://stc-zmp.zadn.vn/zmp-zaui/images/4f417921d58809d650997.jpg'
              alt='slide-4'
            />
          </Swiper.Slide>
          <Swiper.Slide>
            <img
              className='slide-img'
              src='https://stc-zmp.zadn.vn/zmp-zaui/images/677fad2e0187ddd984969.jpg'
              alt='slide-5'
            />
          </Swiper.Slide>
        </Swiper>
      </Box>
    </Page>
  );
}
```
```

--------------------------------

### Tabs Component Example

Source: https://miniapp.zaloplatforms.com/documents/zaui/1.8.0/tabs

An example demonstrating how to use the Tabs component in a Zalo Mini App, including setting up multiple tabs with content.

```APIDOC
## Example

```javascript
import React from "react";
import { Page, Tabs, List, Icon, Avatar } from "zmp-ui";

const alphabet = "abcdefghijklmnopqrstuvwxyz";
const users = Array.from(Array(10).keys()).map((i) => ({
  name: `Người dùng ${i}`,
  avatar: alphabet[Math.floor(Math.random() * alphabet.length)].toUpperCase(),
  online: Math.floor(Math.random() * 10) % 2 === 0,
  key: i,
}));

export default function HomePage(props) {
  return (
    <Page className="section-container">
      <Tabs id="contact-list">
        <Tabs.Tab key="tab1" label="Tab 1">
          <List>
            {users.map((user) => (
              <List.Item
                key={user.key}
                prefix={<Avatar online={user.online}>{user.avatar}</Avatar>}
                title={user.name}
                subTitle="subtitle"
                suffix={<Icon icon="zi-call" />}
              />
            ))}
          </List>
        </Tabs.Tab>
        <Tabs.Tab key="tab2" label="Tab 2">
          Tab 2 content
        </Tabs.Tab>
        <Tabs.Tab key="tab3" label="Tab 3">
          Tab 3 content
        </Tabs.Tab>
      </Tabs>
    </Page>
  );
}
```
```

--------------------------------

### Example Server Upload Response (Success)

Source: https://miniapp.zaloplatforms.com/documents/api/openMediaPicker

This is an example of a successful response from a media upload server API.

```json
{
  "error": 0,
  "message": "Success",
  "data": {
    "urls": [...] 
  }
}
```

--------------------------------

### ImageViewer Usage Example

Source: https://miniapp.zaloplatforms.com/documents/zaui/1.8.0/data-display/ImageViewer

An example demonstrating how to use the ImageViewer component in a React Zalo Mini App. It shows how to manage the visibility and active index of the viewer and how to trigger its opening by clicking on thumbnail images.

```APIDOC
## Example Usage

```javascript
import React, { useState } from "react";
import { Page, ImageViewer, Box, Text } from "zmp-ui";

const images = [
  {
    src: "https://stc-zmp.zadn.vn/zmp-zaui/images/e2e10aa1a6087a5623192.jpg",
    alt: "img 1",
    key: "1"
  },
  {
    src: "https://stc-zmp.zadn.vn/zmp-zaui/images/fee40cbea0177c4925061.jpg",
    alt: "img 2",
    key: "2"
  },
  {
    src: "https://stc-zmp.zadn.vn/zmp-zaui/images/82ca759bd932056c5c233.jpg",
    alt: "img 3",
    key: "3"
  },
  {
    src: "https://stc-zmp.zadn.vn/zmp-zaui/images/77f5b8cd1464c83a91754.jpg",
    alt: "img 4",
    key: "4"
  }
];

export default function HomePage() {
  const [visible, setVisible] = useState(false);
  const [activeIndex, setActiveIndex] = useState(0);
  return (
    <Page className='section-container'>
      <Text.Title size='small'>ImageViewer</Text.Title>
      <Box mt={6}>
        <Box>
          <Text.Title size='small'>Usage</Text.Title>
        </Box>
        <Box mt={2}>
          <Text size='xSmall' className='input-desc'>
            Khi cần xem và tương tác với hình ảnh trên kích thước lớn hơn
          </Text>
        </Box>
        <Box mt={6}>
          <Text.Title size='small'>Example</Text.Title>
        </Box>
        <Box mt={2}>
          <Box flex flexDirection='row' flexWrap='nowrap'>
            {images.map((img, index) => (
              <Box
                mr={1}
                key={img.key}
                style={{
                  width: "68px",
                  height: "69px",
                  borderRadius: "8px",
                  overflow: "hidden"
                }}
              >
                <img
                  style={{ width: "100%", height: "100%", objectFit: "cover" }}
                  role='presentation'
                  onClick={() => {
                    setActiveIndex(index);
                    setVisible(true);
                  }}
                  src={img.src}
                  alt={img.alt}
                />
              </Box>
            ))}
          </Box>
          <ImageViewer
            onClose={() => setVisible(false)}
            activeIndex={activeIndex}
            images={images}
            visible={visible}
          />
        </Box>
      </Box>
    </Page>
  );
}
```
```

--------------------------------

### Basic Slider Examples

Source: https://miniapp.zaloplatforms.com/documents/zaui/1.10.0/input-field/Slider

Demonstrates various configurations of the Slider component, including default values, max values, labels, prefixes, suffixes, and range selection. Use these examples to understand how to customize the Slider for different use cases.

```javascript
import React from "react";
import { Box, Text, Slider, Page, Icon } from "zmp-ui";

function PageSlider() {
  return (
    <Page className="section-container">
      <Text.Title size="small">Slider</Text.Title>
      <Box mb={4} mt={4}>
        <Slider defaultValue={50} label="Label" />
      </Box>
      <Box mb={4}>
        <Slider defaultValue={50} max={100} label="Label" showValue />
      </Box>
      <Box mb={4}>
        <Slider
          label="Label"
          defaultValue={50}
          prefix={<Icon icon="zi-gallery" />}
          suffix={<Icon icon="zi-gallery" />}
        />
      </Box>
      <Box mb={4}>
        <Slider
          defaultValue={50}
          prefix={<Text size="xSmall">00:00</Text>}
          suffix={<Text size="xSmall">04:30</Text>}
        />
      </Box>
      <Box mb={4}>
        <Slider defaultValue={[20, 40]} />
      </Box>
      <Box mb={4}>
        <Slider defaultValue={3} marks max={4} />
      </Box>
      <Box mb={4}>
        <Slider defaultValue={[3, 7]} marks={[1, 5, 10]} max={10} />
      </Box>
    </Page>
  );
}

export default PageSlider;
```

--------------------------------

### Slider Examples

Source: https://miniapp.zaloplatforms.com/documents/zaui/input-field/Slider

Illustrates various ways to use the Slider component with different properties and configurations.

```APIDOC
## Slider Examples

### Description

Examples demonstrating the usage of the Slider component in different scenarios.

### Basic Slider
```javascript
import React from "react";
import { Box, Slider } from "zmp-ui";

<Box mb={4}>
  <Slider defaultValue={50} label="Label" />
</Box>
```

### Slider with Max Value and Show Value
```javascript
import React from "react";
import { Box, Slider } from "zmp-ui";

<Box mb={4}>
  <Slider defaultValue={50} max={100} label="Label" showValue />
</Box>
```

### Slider with Prefix and Suffix Icons
```javascript
import React from "react";
import { Box, Slider, Icon } from "zmp-ui";

<Box mb={4}>
  <Slider
    label="Label"
    defaultValue={50}
    prefix={<Icon icon="zi-gallery" />}
    suffix={<Icon icon="zi-gallery" />}
  />
</Box>
```

### Slider with Custom Prefix and Suffix Text
```javascript
import React from "react";
import { Box, Slider, Text } from "zmp-ui";

<Box mb={4}>
  <Slider
    defaultValue={50}
    prefix={<Text size="xSmall">00:00</Text>}
    suffix={<Text size="xSmall">04:30</Text>}
  />
</Box>
```

### Range Slider
```javascript
import React from "react";
import { Box, Slider } from "zmp-ui";

<Box mb={4}>
  <Slider defaultValue={[20, 40]} />
</Box>
```

### Slider with Marks
```javascript
import React from "react";
import { Box, Slider } from "zmp-ui";

<Box mb={4}>
  <Slider defaultValue={3} marks max={4} />
</Box>
```

### Range Slider with Custom Marks
```javascript
import React from "react";
import { Box, Slider } from "zmp-ui";

<Box mb={4}>
  <Slider defaultValue={[3, 7]} marks={[1, 5, 10]} max={10} />
</Box>
```
```

--------------------------------

### Face Retrieval Result Response Example

Source: https://miniapp.zaloplatforms.com/documents/ekyc/apis/faceRetrievalResult

This is an example of the JSON response body returned by the face retrieval API. The 'data' field contains encrypted information that needs to be decrypted to get validation details for ID numbers and faces.

```json
{
  "code": 0,
  "message": "Successful",
  "data": "<ENCRYPTED_DATA_IN_BASE64>",
  "sign": "8f4642cdb4c555f9a6d5926f4df9b73e44da2e675512d65d44c0a212",
  "request_id": "12345678"
}
```

--------------------------------

### Open Media Picker with Async/Await

Source: https://miniapp.zaloplatforms.com/documents/api/openMediaPicker

This example demonstrates opening the media picker using async/await for a more modern asynchronous flow. It includes error handling for API failures.

```javascript
import { openMediaPicker } from "zmp-sdk/apis";

const pickMedia = async () => {
  try {
    const { data } = await openMediaPicker({
      type: "photo",
      serverUploadUrl: "https://<your-domain-api>/upload/media",
      compressLevel: 2, //Tùy chọn nếu cần nén ảnh
    });
    const result = JSON.parse(data);
    console.log(result);
  } catch (error) {
    // xử lý khi gọi api thất bại
    console.log(error);
  }
};

```

--------------------------------

### Get Native Storage Info

Source: https://miniapp.zaloplatforms.com/documents/api/getNativeStorageInfo

This function retrieves the current and limit sizes of the native storage cache synchronously. It is supported starting from SDK version 2.43.0.

```APIDOC
## getStorageInfo

### Description
Retrieves information about the native storage cache synchronously.

### Method
`nativeStorage.getStorageInfo()`

### Parameters
This method does not take any parameters.

### Response
Returns a `Promise<StorageInfo>` containing the cache information.

#### StorageInfo
- **currentSize** (`number`) - The current space occupied by the cache in KB.
- **limitSize** (`number`) - The limit size of the cache space in KB.

### Request Example
```javascript
const { currentSize, limitSize } = nativeStorage.getStorageInfo();
```

### Response Example
```json
{
  "currentSize": 1024, 
  "limitSize": 5120 
}
```

### Version Support
- SDK: 2.43.0 and above
```

--------------------------------

### Get Current Network Type

Source: https://miniapp.zaloplatforms.com/documents/api/getNetworkType

Call the getNetworkType function to retrieve the current network type. The result is a Promise that resolves to an object containing the networkType. Handle potential errors by referring to the error handling guide.

```javascript
const { networkType } = await getNetworkType();
```

--------------------------------

### Basic Grid Layout Example

Source: https://miniapp.zaloplatforms.com/documents/zaui/1.10.0/layout/Grid

Demonstrates how to use the Grid component to create a layout with a specified number of columns and spacing. Ensure Zalo UI components are imported.

```javascript
import React from "react";
import { Page, Grid, Button, Center } from "zmp-ui";

export default function HomePage() {
  return (
    <Page className='section-container'>
      <Center gutters='1rem'>
        <Grid space='1rem' columnCount={3}>
          <div
            style={{
              border: "solid 2px",
              width: "20px",
              height: "20px"
            }}
          />
          <div
            style={{
              border: "solid 2px",
              width: "30px",
              height: "20px"
            }}
          />
          <div
            style={{
              border: "solid 2px",
              width: "40px",
              height: "20px"
            }}
          />
          <div
            style={{
              border: "solid 2px",
              width: "50px",
              height: "20px"
            }}
          />
          <div
            style={{
              border: "solid 2px",
              width: "60px",
              height: "20px"
            }}
          />
        </Grid>
      </Center>
    </Page>
  );
}
```

--------------------------------

### Get Current App Name and Version

Source: https://miniapp.zaloplatforms.com/documents/api/getAppInfo

Call the getAppInfo API to retrieve the current Zalo Mini App's name and live version. Ensure you handle potential errors by referring to the error handling guide.

```javascript
const { name, version } = await getAppInfo({});  
```

--------------------------------

### Switch Component Examples

Source: https://miniapp.zaloplatforms.com/documents/zaui/1.10.0/input-field/Switch

Demonstrates various configurations of the Switch component, including different sizes, checked states, and disabled states. Import Switch from 'zmp-ui'.

```javascript
import React from "react";
import { Page, Switch, Text } from "zmp-ui";

export default function HomePage(props) {
  return (
    <Page className="section-container">
      <Text.Title size="small">Switch</Text.Title>
      Medium Size
      <div>
        <Switch label="Label" />
      </div>
      <div>
        <Switch checked label="Label" />
      </div>
      <div>
        <Switch disabled label="Label" />
      </div>
      <div>
        <Switch checked disabled label="Label" />
      </div>
      Small Size
      <div>
        <Switch size="small" label="Label" />
      </div>
      <div>
        <Switch size="small" checked label="Label" />
      </div>
      <div>
        <Switch size="small" disabled label="Label" />
      </div>
      <div>
        <Switch size="small" checked disabled label="Label" />
      </div>
    </Page>
  );
}
```

--------------------------------

### Khởi tạo dự án Zalo Mini App

Source: https://miniapp.zaloplatforms.com/documents/devtools/cli/commands/init

Sử dụng lệnh `zmp init` để tạo một dự án Zalo Mini App mới. Lệnh này sẽ tạo cấu trúc thư mục và cài đặt các dependencies cần thiết.

```bash
zmp init  

```

--------------------------------

### Page Component Example

Source: https://miniapp.zaloplatforms.com/documents/zaui/container/Page

An example demonstrating how to use the Page component with the `hideScrollbar` property.

```APIDOC
## Page Component Example

### HomePage.js

```javascript
import React from "react";
import { Page, Input } from "zmp-ui";

export default function HomePage(props) {
  return (
    <Page className="section-container" hideScrollbar={true}>
      <Input label="Label" helperText="Helper text" />
    </Page>
  );
}
```
```

--------------------------------

### Swiper Autoplay Example

Source: https://miniapp.zaloplatforms.com/documents/zaui/data-display/Swiper

This example shows how to enable and configure the autoplay feature for the Swiper component.

```APIDOC
## Swiper Autoplay

### Description

This example demonstrates how to enable and configure the autoplay feature for the Swiper component, including setting the duration for transitions.

### Properties Used

- **autoplay** (boolean) - Enables automatic slide transitions.
- **duration** (number) - Sets the time in milliseconds for each slide before transitioning.
- **loop** (boolean) - Enables continuous looping of slides.

### Example

```javascript
import React from "react";
import { Page, Swiper, Box, Text } from "zmp-ui";

export default function HomePage() {
  return (
    <Page className='section-container'>
      <Text.Title size='small'>Swiper</Text.Title>
      <Box
        mt={6}
        flex
        flexDirection='column'
        justifyContent='center'
        alignItems='center'
      >
        <Swiper autoplay duration={2000} loop>
          <Swiper.Slide>
            <img
              className='slide-img'
              src='https://stc-zmp.zadn.vn/zmp-zaui/images/0e05d63a7a93a6cdff826.jpg'
              alt='slide-1'
            />
          </Swiper.Slide>
          <Swiper.Slide>
            <img
              className='slide-img'
              src='https://stc-zmp.zadn.vn/zmp-zaui/images/0f7c061caab576eb2fa45.jpg'
              alt='slide-2'
            />
          </Swiper.Slide>
          <Swiper.Slide>
            <img
              className='slide-img'
              src='https://stc-zmp.zadn.vn/zmp-zaui/images/321fb45f18f6c4a89de78.jpg'
              alt='slide-3'
            />
          </Swiper.Slide>
          <Swiper.Slide>
            <img
              className='slide-img'
              src='https://stc-zmp.zadn.vn/zmp-zaui/images/4f417921d58809d650997.jpg'
              alt='slide-4'
            />
          </Swiper.Slide>
          <Swiper.Slide>
            <img
              className='slide-img'
              src='https://stc-zmp.zadn.vn/zmp-zaui/images/677fad2e0187ddd984969.jpg'
              alt='slide-5'
            />
          </Swiper.Slide>
        </Swiper>
      </Box>
    </Page>
  );
}
```
```

--------------------------------

### Basic async/await usage example

Source: https://miniapp.zaloplatforms.com/documents/api/errorCode

Demonstrates the basic structure of using async/await for API calls. Remember that `await` must be used inside an `async` function.

```javascript
const { userInfo } = await getUserInfo({
  autoRequestPermission: true,
});
const { orders } = await fetchOrders({
  userId: userInfo.id,
});
console.log("Các đơn hàng của người dùng: ", orders);
```

--------------------------------

### Avatar Usage Example

Source: https://miniapp.zaloplatforms.com/documents/zaui/1.8.0/data-display/Avatar

Example demonstrating the usage of the Avatar component with different sizes and variations.

```APIDOC
## Example

```javascript
import React from "react";
import { Avatar, Text, Box, Page } from "zmp-ui";

const { Group } = Avatar;
function AvatarPage() {
  return (
    <>
      <Page className="section-container">
        <Text.Title size="small">Size</Text.Title>
        <Box flex mt={6} className="avatar-scroll-sections">
          <Box mt={6} mr={6} flex flexDirection="column" alignItems="center">
            <Box>
              <Text size="xxSmall">16px</Text>
            </Box>
            <Box mt={2}>
              <Avatar size={16} />
            </Box>
          </Box>
          <Box mt={6} mr={6} flex flexDirection="column" alignItems="center">
            <Box>
              <Text size="xxSmall">24px</Text>
            </Box>
            <Box mt={2}>
              <Avatar size={24} />
            </Box>
          </Box>
          <Box mt={6} mr={6} flex flexDirection="column" alignItems="center">
            <Box>
              <Text size="xxSmall">32x</Text>
            </Box>
            <Box mt={2}>
              <Avatar size={32} />
            </Box>
          </Box>
          <Box mt={6} mr={6} flex flexDirection="column" alignItems="center">
            <Box>
              <Text size="xxSmall">40px</Text>
            </Box>
            <Box mt={2}>
              <Avatar size={40} />
            </Box>
          </Box>
          <Box mt={6} mr={6} flex flexDirection="column" alignItems="center">
            <Box>
              <Text size="xxSmall">48px</Text>
            </Box>
            <Box mt={2}>
              <Avatar size={48} />
            </Box>
          </Box>
          <Box mt={6} mr={6} flex flexDirection="column" alignItems="center">
            <Box>
              <Text size="xxSmall">64px</Text>
            </Box>
            <Box mt={2}>
              <Avatar size={64} />
            </Box>
          </Box>
          <Box mt={6} mr={6} flex flexDirection="column" alignItems="center">
            <Box>
              <Text size="xxSmall">80px</Text>
            </Box>
            <Box mt={2}>
              <Avatar size={80} />
            </Box>
          </Box>
        </Box>
      </Page>
      <Page className="section-container">
        <Text.Title size="small">Variation</Text.Title>
        <Box flex flexWrap>
          <Box mt={6} mr={6} flex flexDirection="column">
            <Box>
              <Text size="xxSmall">Group 1</Text>
            </Box>
            <Box mt={2}>
              <Group maxCounter={1}>
                <Avatar />
                <Avatar />
              </Group>
            </Box>
          </Box>
        </Box>
      </Page>
    </>
  );
}

```

--------------------------------

### Deploy Zalo Mini App using CLI

Source: https://miniapp.zaloplatforms.com/documents/intro/convert-web-app-to-zalo-mini-app

Use the Zalo Mini App CLI to deploy your existing project. Follow the prompts to select the 'Deploy your existing project' option and specify the build folder.

```bash
zmp deploy
```

--------------------------------

### Basic Bottom Sheet and Action Sheet Example

Source: https://miniapp.zaloplatforms.com/documents/zaui/1.9.0/sheet

Demonstrates how to use both a custom bottom sheet for displaying information and an action sheet for menu options. Ensure the Sheet and Sheet.Actions components are imported from 'zmp-ui'.

```javascript
import React, { useRef, useState } from "react";
import { Button, Sheet, Text, Box, Page } from "zmp-ui";

export default function Demo() {
  const [sheetVisible, setSheetVisible] = useState(false);
  const [actionSheetVisible, setActionSheetVisible] = useState(false);
  return (
    <Page className="section-container">
      <Text.Title size="small">Bottom Sheet</Text.Title>
      <Box mt={4}>
        <Button
          variant="secondary"
          fullWidth
          onClick={() => {
            setActionSheetVisible(true);
          }}
        >
          Bottom Action Sheet
        </Button>
      </Box>
      <Box mt={4}>
        <Button
          variant="secondary"
          fullWidth
          onClick={() => {
            setSheetVisible(true);
          }}
        >
          Custom Bottom Sheet
        </Button>
      </Box>

      <Sheet
        visible={sheetVisible}
        onClose={() => setSheetVisible(false)}
        autoHeight
        mask
        handler
        swipeToClose
      >
        <Box p={4} className="custom-bottom-sheet" flex flexDirection="column">
          <Box className="bottom-sheet-cover">
            <img alt="Bottom Sheet" src={""} />
          </Box>
          <Box my={4}>
            <Text.Title>
              Cho phép Starbucks Coffee xác định vị trí của bạn
            </Text.Title>
          </Box>
          <Box className="bottom-sheet-body" style={{ overflowY: "auto" }}>
            <Text>
              Starbucks Coffee sẽ sử dụng vị trí của bạn để hỗ trợ giao nhận
              hàng, tìm kiếm dịch vụ, bạn bè quanh bạn, hoặc các dịch vụ liên
              quan đến địa điểm khác.
            </Text>
          </Box>
          <Box flex flexDirection="row" mt={1}>
            <Box style={{ flex: 1 }} pr={1}>
              <Button
                fullWidth
                variant="secondary"
                onClick={() => {
                  setSheetVisible(false);
                }}
              >
                Để sau
              </Button>
            </Box>
            <Box style={{ flex: 1 }} pl={1}>
              <Button
                fullWidth
                onClick={() => {
                  setSheetVisible(false);
                }}
              >
                Cho phép
              </Button>
            </Box>
          </Box>
        </Box>
      </Sheet>

      <Sheet.Actions
        mask
        visible={actionSheetVisible}
        title="This is title, it can be one line or two line"
        onClose={() => setActionSheetVisible(false)}
        swipeToClose
        actions={[
          [
            { text: "Sample Menu", close: true },
            { text: "Sample Menu", close: true },
            {
              text: "Negative Menu",
              danger: true,
              close: true,
            },
          ],
          [{ text: "Cancel", close: true }],
        ]}
      />
    </Page>
  );
}
```

--------------------------------

### Import getSetting API

Source: https://miniapp.zaloplatforms.com/documents/api/getSetting

Import the getSetting API from the zmp-sdk/apis library. This is a prerequisite for using the API.

```javascript
import { getSetting } from "zmp-sdk/apis";  
```

--------------------------------

### Example Server Upload Response (Failure)

Source: https://miniapp.zaloplatforms.com/documents/api/openMediaPicker

This is an example of a failed response from a media upload server API.

```json
{
  "error": -1,
  "message": "Fail"
}
```

--------------------------------

### Navigate to Page 1 using useNavigate

Source: https://miniapp.zaloplatforms.com/documents/zaui/1.10.0/router/ZMPRouter

This example demonstrates how to use the `useNavigate` hook to navigate to '/page1' when a button is clicked. Ensure `ZMPRouter` is set up to handle the routing.

```javascript
import React from "react";
import { Page, Text, Box, Button, useNavigate } from "zmp-ui";
export default function HomePage(props) {
  const navigate = useNavigate();

  return (
    <Page className="section-container">
      <Text.Title style={{ textAlign: "center" }}>Home Page</Text.Title>
      <Box mt={6}>
        <Button
          fullWidth
          variant="secondary"
          onClick={() => {
            navigate("/page1");
          }}
        >
          Go To Page 1
        </Button>
      </Box>
    </Page>
  );
}

```

--------------------------------

### Basic Tabs Implementation

Source: https://miniapp.zaloplatforms.com/documents/zaui/1.10.0/tabs

Demonstrates how to implement a basic Tabs component with multiple tab panes, each containing different content. This example shows how to structure tabs with labels and associated content, including a list of users in the first tab.

```javascript
import React from "react";
import { Page, Tabs, List, Icon, Avatar } from "zmp-ui";

const alphabet = "abcdefghijklmnopqrstuvwxyz";
const users = Array.from(Array(10).keys()).map((i) => ({
  name: `Người dùng ${i}`,
  avatar: alphabet[Math.floor(Math.random() * alphabet.length)].toUpperCase(),
  online: Math.floor(Math.random() * 10) % 2 === 0,
  key: i,
}));

export default function HomePage(props) {
  return (
    <Page className="section-container">
      <Tabs id="contact-list">
        <Tabs.Tab key="tab1" label="Tab 1">
          <List>
            {users.map((user) => (
              <List.Item
                key={user.key}
                prefix={<Avatar online={user.online}>{user.avatar}</Avatar>}
                title={user.name}
                subTitle="subtitle"
                suffix={<Icon icon="zi-call" />}
              />
            ))}
          </List>
        </Tabs.Tab>
        <Tabs.Tab key="tab2" label="Tab 2">
          Tab 2 content
        </Tabs.Tab>
        <Tabs.Tab key="tab3" label="Tab 3">
          Tab 3 content
        </Tabs.Tab>
      </Tabs>
    </Page>
  );
}

```

--------------------------------

### Create Payment Order with Minimal Details (Async/Await)

Source: https://miniapp.zaloplatforms.com/documents/payment/createOrder

This snippet demonstrates creating a payment order using async/await syntax with essential details. It includes a description, item list, amount, MAC, and a fail callback. The orderId is destructured from the resolved promise.

```javascript
const { orderId } = await Payment.createOrder({
  desc: "Thanh toán 50.000",
  item: [
    { id: "1", amount: 20000 },
    { id: "2", amount: 30000 },
  ],
  amount: 50000,
  mac: "YOUR MAC",
  fail: (err) => {
    // Tạo đơn hàng lỗi  
    console.log(err);
  },
});
```

--------------------------------

### Page Component Usage Example

Source: https://miniapp.zaloplatforms.com/documents/zaui/1.10.0/container/Page

An example demonstrating how to use the Page component in a React application for Zalo Mini Apps, including setting the `hideScrollbar` property.

```APIDOC
## Example

```javascript
import React from "react";
import { Page, Input } from "zmp-ui";

export default function HomePage(props) {
  return (
    <Page className="section-container" hideScrollbar={true}>
      <Input label="Label" helperText="Helper text" />
    </Page>
  );
}
```
```

--------------------------------

### Cấu hình Maven cho SDK Open API

Source: https://miniapp.zaloplatforms.com/documents/open-apis/open/set-up-client

Thêm dependency này vào file pom.xml của bạn để sử dụng SDK Open API. Thay thế `{your_path_to_file_sdk}` bằng đường dẫn thực tế đến file JAR của SDK.

```xml
<dependency>
  <groupId>com.vng.zalo</groupId>
  <artifactId>zalo-miniapp-openapi-sdk</artifactId>
  <version>2.4.0</version>
  <scope>system</scope>
  <systemPath>{your_path_to_file_sdk}</systemPath>
</dependency>
```

--------------------------------

### Slider Component Example

Source: https://miniapp.zaloplatforms.com/documents/zaui/1.7.0/input-field/Slider

This example demonstrates how to use the Slider component with various configurations, including setting default values, labels, prefixes, suffixes, and range selections.

```APIDOC
## Slider Example

### HomePage.js

```javascript
import React from "react";
import { Box, Text, Slider, Page, Icon } from "zmp-ui";

function PageSlider() {
  return (
    <Page className="section-container">
      <Text.Title size="small">Slider</Text.Title>
      <Box mb={4} mt={4}>
        <Slider defaultValue={50} label="Label" />
      </Box>
      <Box mb={4}>
        <Slider defaultValue={50} max={100} label="Label" showValue />
      </Box>
      <Box mb={4}>
        <Slider
          label="Label"
          defaultValue={50}
          prefix={<Icon icon="zi-gallery" />}
          suffix={<Icon icon="zi-gallery" />}
        />
      </Box>
      <Box mb={4}>
        <Slider
          defaultValue={50}
          prefix={<Text size="xSmall">00:00</Text>}
          suffix={<Text size="xSmall">04:30</Text>}
        />
      </Box>
      <Box mb={4}>
        <Slider defaultValue={[20, 40]} />
      </Box>
      <Box mb={4}>
        <Slider defaultValue={3} marks max={4} />
      </Box>
      <Box mb={4}>
        <Slider defaultValue={[3, 7]} marks={[1, 5, 10]} max={10} />
      </Box>
    </Page>
  );
}

export default PageSlider;
```
```

--------------------------------

### ImageViewer Usage Example

Source: https://miniapp.zaloplatforms.com/documents/zaui/1.9.0/data-display/ImageViewer

This example demonstrates how to use the ImageViewer component in a React application. It shows how to manage the visibility and active index of the viewer, and how to trigger its display when images are clicked.

```APIDOC
## ImageViewer Usage Example

### Example

```javascript
import React, { useState } from "react";
import { Page, ImageViewer, Box, Text } from "zmp-ui";

const images = [
  {
    src: "https://stc-zmp.zadn.vn/zmp-zaui/images/e2e10aa1a6087a5623192.jpg",
    alt: "img 1",
    key: "1",
  },
  {
    src: "https://stc-zmp.zadn.vn/zmp-zaui/images/fee40cbea0177c4925061.jpg",
    alt: "img 2",
    key: "2",
  },
  {
    src: "https://stc-zmp.zadn.vn/zmp-zaui/images/82ca759bd932056c5c233.jpg",
    alt: "img 3",
    key: "3",
  },
  {
    src: "https://stc-zmp.zadn.vn/zmp-zaui/images/77f5b8cd1464c83a91754.jpg",
    alt: "img 4",
    key: "4",
  },
];

export default function HomePage() {
  const [visible, setVisible] = useState(false);
  const [activeIndex, setActiveIndex] = useState(0);
  return (
    <Page className="section-container">
      <Text.Title size="small">ImageViewer</Text.Title>
      <Box mt={6}>
        <Box>
          <Text.Title size="small">Usage</Text.Title>
        </Box>
        <Box mt={2}>
          <Text size="xSmall" className="input-desc">
            When you need to view and interact with images at a larger size.
          </Text>
        </Box>
        <Box mt={6}>
          <Text.Title size="small">Example</Text.Title>
        </Box>
        <Box mt={2}>
          <Box flex flexDirection="row" flexWrap="nowrap">
            {images.map((img, index) => (
              <Box
                mr={1}
                key={img.key}
                style={{
                  width: "68px",
                  height: "69px",
                  borderRadius: "8px",
                  overflow: "hidden",
                }}
              >
                <img
                  style={{ width: "100%", height: "100%", objectFit: "cover" }}
                  role="presentation"
                  onClick={() => {
                    setActiveIndex(index);
                    setVisible(true);
                  }}
                  src={img.src}
                  alt={img.alt}
                />
              </Box>
            ))}
          </Box>
          <ImageViewer
            onClose={() => setVisible(false)}
            activeIndex={activeIndex}
            images={images}
            visible={visible}
          />
        </Box>
      </Box>
    </Page>
  );
}
```
```