chore(demo): new ui and remove legacy code

demo/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

demo/package.json

@@ -6,16 +6,18 @@
     "node": ">=20"
   },
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
     "proto": "pbjs -t json-module -w commonjs -o src/protobuf/SttMessage.js src/protobuf/SttMessage.proto"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.3.7",
+    "@hookform/resolvers": "^3.9.1",
     "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
@@ -24,22 +26,23 @@
     "@reduxjs/toolkit": "^2.2.3",
     "agora-rtc-sdk-ng": "^4.21.0",
     "agora-rtm": "^2.2.0",
-    "antd": "^5.21.4",
     "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.453.0",
-    "next": "14.2.4",
+    "next": "^15.0.2",
     "next-themes": "^0.3.0",
     "protobufjs": "^7.2.5",
     "react": "^18",
     "react-colorful": "^5.6.1",
     "react-dom": "^18",
+    "react-hook-form": "^7.53.1",
     "react-redux": "^9.1.0",
     "redux": "^5.0.1",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.5.4",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@minko-fe/postcss-pxtoviewport": "^1.3.2",
@@ -50,7 +53,7 @@
     "@types/react-redux": "^7.1.22",
     "autoprefixer": "^10.4.20",
     "eslint": "^8",
-    "eslint-config-next": "14.2.4",
+    "eslint-config-next": "^15.0.2",
     "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",

demo/src/app/home/page.tsx

@@ -8,7 +8,6 @@ import Action from "@/components/Layout/Action"
 // import RTCCard from "@/components/Dynamic/RTCCard"
 // import ChatCard from "@/components/Chat/ChatCard"
 import { cn } from "@/lib/utils"
-import FormModal from "@/components/settings"
 
 const DynamicRTCCard = dynamic(() => import("@/components/Dynamic/RTCCard"), {
   ssr: false,
@@ -46,7 +45,6 @@ export default function Home() {
             )}
           />
         </div>
-        <FormModal />
       </div>
     </>
   )

demo/src/app/index.module.scss → demo/src/app/index.module.css

@@ -1,20 +1,4 @@
-@function multiple-box-shadow($n, $width, $height) {
-  $value: "#{random() * $width} #{random() * $height} #FFF";
-
-  @for $i from 2 through $n {
-    $value: "#{$value}, #{random() * $width} #{random() * $height} #FFF";
-  }
-
-  @return unquote($value);
-}
-
 @media (max-width: 1400px) {
-  $width: 1500px;
-  $height: 1500px;
-  $shadows-small: multiple-box-shadow(700, $width, $height);
-  $shadows-medium: multiple-box-shadow(200, $width, $height);
-  $shadows-big: multiple-box-shadow(100, $width, $height);
-
   .login {
     position: absolute;
     left: 0;
@@ -31,33 +15,33 @@
     width: 1px;
     height: 1px;
     background: transparent;
-    box-shadow: $shadows-small;
+    box-shadow:
+      145px 234px #fff,
+      876px 543px #fff;
     animation: animStar 50s linear infinite;
   }
 
   .starts2 {
     width: 2px;
     height: 2px;
-    box-shadow: $shadows-medium;
+    box-shadow:
+      445px 234px #fff,
+      276px 943px #fff;
     animation: animStar 100s linear infinite;
   }
 
   .starts3 {
     width: 3px;
     height: 3px;
     background: transparent;
-    box-shadow: $shadows-big;
+    box-shadow:
+      745px 834px #fff,
+      176px 243px #fff;
     animation: animStar 150s linear infinite;
   }
 }
 
 @media (min-width: 1400px) {
-  $width: 150vw;
-  $height: 150vh;
-  $shadows-small: multiple-box-shadow(700, $width, $height);
-  $shadows-medium: multiple-box-shadow(200, $width, $height);
-  $shadows-big: multiple-box-shadow(100, $width, $height);
-
   .login {
     position: absolute;
     left: 0;
@@ -74,22 +58,28 @@
     width: 1px;
     height: 1px;
     background: transparent;
-    box-shadow: $shadows-small;
+    box-shadow:
+      45vw 34vh #fff,
+      76vw 43vh #fff;
     animation: animStar 50s linear infinite;
   }
 
   .starts2 {
     width: 2px;
     height: 2px;
-    box-shadow: $shadows-medium;
+    box-shadow:
+      145vw 134vh #fff,
+      76vw 143vh #fff;
     animation: animStar 100s linear infinite;
   }
 
   .starts3 {
     width: 3px;
     height: 3px;
     background: transparent;
-    box-shadow: $shadows-big;
+    box-shadow:
+      45vw 134vh #fff,
+      176vw 43vh #fff;
     animation: animStar 150s linear infinite;
   }
 }

demo/src/app/layout.tsx

@@ -1,4 +1,3 @@
-import { ConfigProvider } from "antd"
 import { StoreProvider } from "@/store"
 import type { Metadata, Viewport } from "next"
 import "./global.css"
@@ -31,17 +30,17 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className="dark">
-        <ConfigProvider
+        {/* <ConfigProvider
           theme={{
             components: {
               Select: {
                 selectorBg: "#181A1D",
               },
             },
           }}
-        >
-          <StoreProvider>{children}</StoreProvider>
-        </ConfigProvider>
+        > */}
+        <StoreProvider>{children}</StoreProvider>
+        {/* </ConfigProvider> */}
         <Toaster />
       </body>
     </html>

demo/src/app/page.tsx

@@ -1,14 +1,13 @@
-import LoginCard from "@/components/loginCard"
-import styles from "./index.module.scss"
+import LoginCard from "@/components/Card/Login"
+import styles from "./index.module.css"
 
 export default function Login() {
-
   return (
     <main className={styles.login}>
       <div className={styles.starts} />
       <div className={styles.starts2} />
       <div className={styles.starts3} />
       <LoginCard />
     </main>
-  );
+  )
 }