fix: search components

.env.development

@@ -1,2 +1,2 @@
-#NEXT_PUBLIC_BASE_URL=http://192.168.0.66:8800
-NEXT_PUBLIC_BASE_URL=http://206.168.191.125:8800
+NEXT_PUBLIC_BASE_URL=http://192.168.0.66:8800
+#NEXT_PUBLIC_BASE_URL=http://206.168.191.125:8800

messages/br.json

@@ -16,6 +16,7 @@
     "responsible": "Responsible Gaming Policy",
     "esportes":  "Esportes Regras",
     "search": "Procure Jogos ou Provedores",
+    "searchHint": "A pesquisa requer pelo menos 3 caracteres",
     "licencia":  "LICENÇA",
     "desc": "bcwin.com é operada conjunta pela Dubet n.v. e pela MLsoft, número de registro da empresa 142919, com endereço registrado em Zuikertuintjeweg Z/N (Zuikertuin Tower) Curação e é licenciada e autorizada pelo governo de Curação. A bcwin.com opera sob a Master License of Gaming Services Provider, N.V. Número da Licença: ",
     "desclink":  "GLH-OCCHKTW0705152022",

src/app/[locale]/(extend)/_home/HomeSearch.tsx

@@ -1,24 +1,60 @@
 "use client";
+import Box from "@/components/Box";
+import { Mask, SearchBar } from "antd-mobile";
 import { useTranslations } from "next-intl";
-import { FC, PropsWithChildren } from "react";
+import { FC, PropsWithChildren, useState } from "react";
 interface Props {}
 
+const Content: FC = () => {
+    const t = useTranslations("HomePage");
+
+    // @ts-ignore
+    return (
+        <Box>
+            <section className={"home-search"}>
+                <SearchBar
+                    className={"rounded-[0.05rem] bg-[#191919]"}
+                    style={{
+                        "--background": "transparent",
+                        "--height": "0.3rem",
+                    }}
+                    placeholder={t("search")}
+                    showCancelButton={() => true}
+                />
+                <div
+                    className={
+                        "h-[.5rem] text-center text-[0.12rem] text-[#6e6e6e]" + " leading-[.5rem]"
+                    }
+                >
+                    A pesquisa requer pelo menos 3 caracteres
+                </div>
+            </section>
+        </Box>
+    );
+};
 const HomeSearch: FC<PropsWithChildren<Props>> = (props) => {
     const t = useTranslations("HomePage");
+    const [visible, setVisible] = useState(true);
     const handler = () => {
         console.log(`🎯🎯🎯🎯🎯-> in HomeSearch.tsx on 9`, "");
+        setVisible(true);
     };
     return (
-        <div
-            onClick={handler}
-            className={
-                "flex items-center rounded-[0.03rem] bg-[#191919] py-[5px]" +
-                " px-[10px] text-[#6e6e6e]"
-            }
-        >
-            <i className={"iconfont icon-sousuo1 mr-[0.0833rem] text-[0.16rem]"}></i>
-            <span className={"text-[0.12rem]"}>{t("search")}</span>
-        </div>
+        <>
+            <div
+                onClick={handler}
+                className={
+                    "flex items-center rounded-[0.03rem] bg-[#191919] py-[5px]" +
+                    " px-[10px] text-[#6e6e6e]"
+                }
+            >
+                <i className={"iconfont icon-sousuo1 mr-[0.0833rem] text-[0.16rem]"}></i>
+                <span className={"text-[0.12rem]"}>{t("search")}</span>
+            </div>
+            <Mask visible={visible} opacity={0.9}>
+                <Content />
+            </Mask>
+        </>
     );
 };
 

src/app/[locale]/(extend)/page.tsx

@@ -1,24 +1,25 @@
 "use server";
 import { BannerRep, GroupType, NoticeRep } from "@/api/home";
-import HomeMessage from "@/app/[locale]/(extend)/_home/HomeMessage";
-import HomeNoticeBar from "@/app/[locale]/(extend)/_home/HomeNoticeBar";
-import HomePrize from "@/app/[locale]/(extend)/_home/HomePrize";
 import Box from "@/components/Box";
 import HomeActions from "./_home/HomeActions";
 import HomeCard from "./_home/HomeCard";
 import HomeGames from "./_home/HomeGames";
+import HomeMessage from "./_home/HomeMessage";
+import HomeNoticeBar from "./_home/HomeNoticeBar";
+import HomePrize from "./_home/HomePrize";
 import HomeSearch from "./_home/HomeSearch";
 import HomeSwiper from "./_home/HomeSwiper";
 import HomeTabs from "./_home/HomeTabs";
 const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
 
+const TIME = 30;
 const getGames = async (): Promise<GroupType[]> => {
     try {
         const data = await fetch(`${BASE_URL}/v1/api/front/game_list`, {
             method: "POST",
             body: JSON.stringify({}),
+            next: { revalidate: TIME },
         }).then((res) => res.json());
-        console.log(`🎯🎯🎯🎯🎯-> in page.tsx on 21`, data.data[0].category);
         return data.data;
     } catch (err) {
         return [];
@@ -32,6 +33,7 @@ const getBanners = async (): Promise<BannerRep[]> => {
             headers: {
                 language: "zh",
             },
+            next: { revalidate: TIME },
         }).then((res) => res.json());
         return response.data;
     } catch (err) {
@@ -47,6 +49,7 @@ const getNotices = async (): Promise<NoticeRep[]> => {
             headers: {
                 language: "zh",
             },
+            next: { revalidate: TIME },
         }).then((res) => res.json());
         return response.data;
     } catch (err) {
@@ -57,10 +60,9 @@ const getNotices = async (): Promise<NoticeRep[]> => {
 export default async function Page() {
     const [group = [], banners = [], notices = []] = await Promise.all([
         getGames(),
-        // getBanners(),
-        // getNotices(),
+        getBanners(),
+        getNotices(),
     ]);
-    console.log(`🎯🎯🎯🎯🎯-> in page.tsx on 64`, banners);
     return (
         <div>
             <HomeMessage />

src/app/[locale]/providers.tsx

@@ -2,9 +2,10 @@
 import { useRouter } from "@/i18n";
 import { setHtmlFontSize } from "@/utils";
 import { NextUIProvider } from "@nextui-org/system";
+import { ConfigProvider } from "antd-mobile";
+import enUS from "antd-mobile/es/locales/en-US";
 import { ThemeProviderProps } from "next-themes/dist/types";
 import { ReactNode, useLayoutEffect } from "react";
-
 export interface ProvidersProps {
     children: ReactNode;
     themeProps?: Omit<ThemeProviderProps, "children">;
@@ -18,7 +19,9 @@ export const Providers = ({ children, themeProps }: ProvidersProps) => {
     }, []);
     return (
         <div id="app" className="bg-black">
-            <NextUIProvider navigate={router.push}>{children}</NextUIProvider>
+            <ConfigProvider locale={enUS}>
+                <NextUIProvider navigate={router.push}>{children}</NextUIProvider>
+            </ConfigProvider>
         </div>
     );
 };

src/app/globals.scss

@@ -17,9 +17,15 @@
   --swiper-pagination-color: #fff;
   --swiper-pagination-bullet-active-bg: #fff;
   --swiper-pagination-bullet-inactive-color: hsla(0, 0%, 100%, .8);
-
+}
+/// antd-mobile
+:root:root{
+  --adm-color-background: transparent ;
   --adm-color-text: #fff;
   --bg-color:#000000;
+  --adm-button-text-color: #fff;
+  --adm-color-primary: #fff;
+
 }
 
 * {
@@ -75,6 +81,16 @@ input {
   color: #fff;
 }
 
+.home-search{
+  .adm-search-bar-input-box {
+    border: none !important;
+  }
+  .adm-search-bar-active{
+    border: 0.0069rem solid green;
+  }
+}
+
+
 
 @media screen and (max-width: 768px) {
   html {