zmp-ui
Version:
Zalo Mini App framework
59 lines • 2.59 kB
JavaScript
import React from "react";
import { Cluster, Icon, Route, Text, Page, Button, useNavigate } from "../..";
import ZMPRouter from "./ZMPRouter";
import AnimationRoutes from "./AnimationRoutes";
var meta = {
title: "Layout/ZMPRouter",
component: ZMPRouter,
argTypes: {
memoryRouter: {
control: {
type: "boolean"
},
defaultValue: false
}
},
tags: ["autodocs"]
};
export default meta;
function Page1() {
var navigate = useNavigate();
return /*#__PURE__*/React.createElement(Page, null, /*#__PURE__*/React.createElement(Cluster, {
space: "16px"
}, /*#__PURE__*/React.createElement(Text.Title, null, "Ch\xE0o m\u1EEBng b\u1EA1n \u0111\u1EBFn v\u1EDBi Zalo Mini App"), /*#__PURE__*/React.createElement(Text, null, "Zalo Mini App l\xE0 nh\u1EEFng \u201C\u1EE9ng d\u1EE5ng nh\u1ECF\u201D ch\u1EA1y tr\u1EF1c ti\u1EBFp tr\xEAn n\u1EC1n t\u1EA3ng Zalo, t\u1EADn d\u1EE5ng ngu\u1ED3n t\xE0i nguy\xEAn c\xF3 s\u1EB5n v\u1EDBi ti\u1EC1m n\u0103ng kh\xF4ng gi\u1EDBi h\u1EA1n t\u1EEB Zalo."), /*#__PURE__*/React.createElement(Button, {
suffixIcon: /*#__PURE__*/React.createElement(Icon, {
icon: "zi-arrow-right"
}),
onClick: function onClick() {
return navigate("/page2");
}
}, "Ti\u1EBFp t\u1EE5c")));
}
Page1.displayName = "Page1";
function Page2() {
var navigate = useNavigate();
return /*#__PURE__*/React.createElement(Page, null, /*#__PURE__*/React.createElement(Cluster, {
space: "16px"
}, /*#__PURE__*/React.createElement(Text.Title, null, "Ch\xE0o m\u1EEBng b\u1EA1n \u0111\u1EBFn v\u1EDBi Zalo Mini App"), /*#__PURE__*/React.createElement(Text, null, "Zalo Mini App l\xE0 nh\u1EEFng \u201C\u1EE9ng d\u1EE5ng nh\u1ECF\u201D ch\u1EA1y tr\u1EF1c ti\u1EBFp tr\xEAn n\u1EC1n t\u1EA3ng Zalo, t\u1EADn d\u1EE5ng ngu\u1ED3n t\xE0i nguy\xEAn c\xF3 s\u1EB5n v\u1EDBi ti\u1EC1m n\u0103ng kh\xF4ng gi\u1EDBi h\u1EA1n t\u1EEB Zalo."), /*#__PURE__*/React.createElement(Button, {
prefixIcon: /*#__PURE__*/React.createElement(Icon, {
icon: "zi-arrow-left"
}),
onClick: function onClick() {
return navigate(-1);
}
}, "Tr\u1EDD l\u1EA1i")));
}
Page2.displayName = "Page2";
export var Default = {
name: "Mặc định",
args: {
memoryRouter: true,
children: /*#__PURE__*/React.createElement(AnimationRoutes, null, /*#__PURE__*/React.createElement(Route, {
path: "/",
element: /*#__PURE__*/React.createElement(Page1, null)
}), /*#__PURE__*/React.createElement(Route, {
path: "/page2",
element: /*#__PURE__*/React.createElement(Page2, null)
}))
}
};