|
@@ -1,8 +1,8 @@
|
|
|
"use client";
|
|
|
import { usePathname, useRouter } from "@/i18n/routing";
|
|
|
-import { Tabs } from "antd-mobile";
|
|
|
+import { Mask, Tabs } from "antd-mobile";
|
|
|
import { useTranslations } from "next-intl";
|
|
|
-import { FC } from "react";
|
|
|
+import { FC, useState } from "react";
|
|
|
|
|
|
interface Props {}
|
|
|
const App: FC<Props> = (props) => {
|
|
@@ -12,16 +12,22 @@ const App: FC<Props> = (props) => {
|
|
|
|
|
|
const activeTab = pathname.split("/").at(-1);
|
|
|
|
|
|
+ const [visible, setVisible] = useState(false);
|
|
|
+
|
|
|
const tabs = [
|
|
|
{ id: 1, page: "summary", content: t("PAINEL"), x: 0.27 },
|
|
|
{ id: 2, page: "referrals", content: t("REFERÊNCIAS"), x: 0.93 },
|
|
|
{ id: 3, page: "report", content: t("RELATÓRIO"), x: 1.7 },
|
|
|
{ id: 4, page: "payments", content: t("PAGAMENTOS"), x: 2.48 },
|
|
|
{ id: 5, page: "faq", content: t("FAQ"), x: 3.06 },
|
|
|
- // { id: 6, page: "faq", content: "TUTORIAL", x: 3.06 },
|
|
|
+ { id: 6, page: "", content: "TUTORIAL", x: 3.06 },
|
|
|
] as const;
|
|
|
const tabsChange = (page: string) => {
|
|
|
- router.replace(`/affiliate/${page}`);
|
|
|
+ if (page) {
|
|
|
+ router.replace(`/affiliate/${page}`);
|
|
|
+ } else {
|
|
|
+ setVisible(true);
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
return (
|
|
@@ -30,6 +36,7 @@ const App: FC<Props> = (props) => {
|
|
|
>
|
|
|
<Tabs
|
|
|
onChange={tabsChange}
|
|
|
+ stretch={false}
|
|
|
style={{
|
|
|
"--active-line-color": "#ff6a01",
|
|
|
"--active-title-color": "#ff6a01",
|
|
@@ -47,6 +54,14 @@ const App: FC<Props> = (props) => {
|
|
|
);
|
|
|
})}
|
|
|
</Tabs>
|
|
|
+ <Mask visible={visible}>
|
|
|
+ <div
|
|
|
+ className={"flex items-center justify-between p-[0.1389rem]" + " bg-[#17181c]"}
|
|
|
+ >
|
|
|
+ <p>Regras de cálculo de comissão</p>
|
|
|
+ <i className={"iconfont icon-guanbi"} onClick={() => setVisible(false)}></i>
|
|
|
+ </div>
|
|
|
+ </Mask>
|
|
|
</div>
|
|
|
);
|
|
|
};
|