From bc5bfab9232003a20f4ca25c560937fce476b6a9 Mon Sep 17 00:00:00 2001
From: boy <101509477+rainnoon@users.noreply.github.com>
Date: Fri, 6 Sep 2024 11:35:04 +0800
Subject: [PATCH] feat: "add svg bg"

---
 src/index.tsx              | 45 +++++++++++++++++++--------------
 src/pages/Mobile/flow.tsx  | 51 ++++++++++++++++++++++++++++++++++++++
 src/pages/Mobile/index.tsx | 12 +++++++++
 3 files changed, 90 insertions(+), 18 deletions(-)
 create mode 100644 src/pages/Mobile/flow.tsx
 create mode 100644 src/pages/Mobile/index.tsx

diff --git a/src/index.tsx b/src/index.tsx
index 4dbfd524..e488b957 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,12 +1,11 @@
 import Loading from './components/Loading'
 import './index.css'
 import { ErrorBook } from './pages/ErrorBook'
+import MobilePage from './pages/Mobile'
 import TypingPage from './pages/Typing'
 import { isOpenDarkModeAtom } from '@/store'
 import { useAtomValue } from 'jotai'
-import mixpanel from 'mixpanel-browser'
-import process from 'process'
-import React, { Suspense, lazy, useEffect } from 'react'
+import React, { Suspense, lazy, useEffect, useState } from 'react'
 import 'react-app-polyfill/stable'
 import { createRoot } from 'react-dom/client'
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
@@ -14,32 +13,40 @@ import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
 const AnalysisPage = lazy(() => import('./pages/Analysis'))
 const GalleryPage = lazy(() => import('./pages/Gallery-N'))
 
-if (process.env.NODE_ENV === 'production') {
-  // for prod
-  mixpanel.init('bdc492847e9340eeebd53cc35f321691')
-} else {
-  // for dev
-  mixpanel.init('5474177127e4767124c123b2d7846e2a', { debug: true })
-}
-
-const container = document.getElementById('root')
-
 function Root() {
   const darkMode = useAtomValue(isOpenDarkModeAtom)
   useEffect(() => {
     darkMode ? document.documentElement.classList.add('dark') : document.documentElement.classList.remove('dark')
   }, [darkMode])
 
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 600)
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 600)
+    }
+
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
   return (
     <React.StrictMode>
       <BrowserRouter basename={REACT_APP_DEPLOY_ENV === 'pages' ? '/qwerty-learner' : ''}>
         <Suspense fallback={<Loading />}>
           <Routes>
-            <Route index element={<TypingPage />} />
-            <Route path="/gallery" element={<GalleryPage />} />
-            <Route path="/analysis" element={<AnalysisPage />} />
-            <Route path="/error-book" element={<ErrorBook />} />
-            <Route path="/*" element={<Navigate to="/" />} />
+            {isMobile ? (
+              <Route path="/*" element={<Navigate to="/mobile" />} />
+            ) : (
+              <>
+                <Route index element={<TypingPage />} />
+                <Route path="/gallery" element={<GalleryPage />} />
+                <Route path="/analysis" element={<AnalysisPage />} />
+                <Route path="/error-book" element={<ErrorBook />} />
+                <Route path="/*" element={<Navigate to="/" />} />
+              </>
+            )}
+            <Route path="/mobile" element={<MobilePage />} />
           </Routes>
         </Suspense>
       </BrowserRouter>
@@ -47,4 +54,6 @@ function Root() {
   )
 }
 
+const container = document.getElementById('root')
+
 container && createRoot(container).render(<Root />)
diff --git a/src/pages/Mobile/flow.tsx b/src/pages/Mobile/flow.tsx
new file mode 100644
index 00000000..0eaf9d2c
--- /dev/null
+++ b/src/pages/Mobile/flow.tsx
@@ -0,0 +1,51 @@
+import type React from 'react'
+
+const Flow: React.FC = () => {
+  const waveStyle = {
+    animation: 'move 3s linear infinite both',
+  }
+
+  return (
+    <div className="h-[12rem] w-full">
+      <svg className="h-full w-full rotate-180 transform" viewBox="0 24 150 24" preserveAspectRatio="none">
+        <defs>
+          <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v60h-352z" />
+        </defs>
+        <g>
+          <use
+            className="wave"
+            xlinkHref="#wave"
+            fill="#ced2fc"
+            x="50"
+            y="0"
+            style={{ ...waveStyle, animationDelay: '-2s', animationDuration: '12s' }}
+          />
+          <use
+            className="wave"
+            xlinkHref="#wave"
+            fill="#a8b0f6"
+            x="50"
+            y="2"
+            style={{ ...waveStyle, animationDelay: '-4s', animationDuration: '9s' }}
+          />
+          <use
+            className="wave"
+            xlinkHref="#wave"
+            fill="#818cf8"
+            x="50"
+            y="4"
+            style={{ ...waveStyle, animationDelay: '-6s', animationDuration: '6s' }}
+          />
+        </g>
+        <style>{`
+    @keyframes move {
+      from { transform: translate(85px, 0%); }
+      to { transform: translate(-90px, 0%); }
+    }
+  `}</style>
+      </svg>
+    </div>
+  )
+}
+
+export default Flow
diff --git a/src/pages/Mobile/index.tsx b/src/pages/Mobile/index.tsx
new file mode 100644
index 00000000..f5a25833
--- /dev/null
+++ b/src/pages/Mobile/index.tsx
@@ -0,0 +1,12 @@
+import Flow from './flow'
+import type React from 'react'
+
+const MobilePage: React.FC = () => {
+  return (
+    <div className="flex h-screen w-screen  ">
+      <Flow />
+    </div>
+  )
+}
+
+export default MobilePage