From c7a3f3f150dd7af8c5394ba11323fd6addf2481d Mon Sep 17 00:00:00 2001
From: molvqingtai <molvqingtai@gmail.com>
Date: Fri, 27 Sep 2024 06:22:37 +0800
Subject: [PATCH] fix(options): fix meteors overflow

---
 src/app/options/App.tsx                  |  9 ++++-----
 src/app/options/components/BadgeList.tsx |  2 +-
 src/app/options/components/Layout.tsx    | 20 ++++++++++++++++++++
 src/app/options/components/Main.tsx      |  6 +++---
 4 files changed, 28 insertions(+), 9 deletions(-)
 create mode 100644 src/app/options/components/Layout.tsx

diff --git a/src/app/options/App.tsx b/src/app/options/App.tsx
index 600b28d..3afe427 100644
--- a/src/app/options/App.tsx
+++ b/src/app/options/App.tsx
@@ -2,18 +2,17 @@ import { Toaster } from 'sonner'
 import Main from './components/Main'
 import ProfileForm from './components/ProfileForm'
 import BadgeList from './components/BadgeList'
-import Meteors from '@/components/magicui/meteors'
+import Layout from './components/Layout'
 
 function App() {
   return (
-    <>
-      <Meteors number={30} />
-      <BadgeList></BadgeList>
+    <Layout>
       <Main>
         <ProfileForm></ProfileForm>
         <Toaster richColors position="top-center" />
       </Main>
-    </>
+      <BadgeList></BadgeList>
+    </Layout>
   )
 }
 
diff --git a/src/app/options/components/BadgeList.tsx b/src/app/options/components/BadgeList.tsx
index 6ec7f07..6c5a837 100644
--- a/src/app/options/components/BadgeList.tsx
+++ b/src/app/options/components/BadgeList.tsx
@@ -4,7 +4,7 @@ import { GitHubLogoIcon } from '@radix-ui/react-icons'
 
 const BadgeList: FC = () => {
   return (
-    <div className="fixed inset-x-1 bottom-6 mx-auto flex w-fit font-sans">
+    <div className="fixed inset-x-1 bottom-6 mx-auto flex w-fit">
       <Button asChild size="lg" variant="ghost" className="rounded-full px-3 text-xl font-semibold text-primary">
         <a href="https://github.com/molvqingtai/WebChat" target="https://github.com/molvqingtai/WebChat">
           <GitHubLogoIcon className="mr-1 size-6"></GitHubLogoIcon>
diff --git a/src/app/options/components/Layout.tsx b/src/app/options/components/Layout.tsx
new file mode 100644
index 0000000..091ffa6
--- /dev/null
+++ b/src/app/options/components/Layout.tsx
@@ -0,0 +1,20 @@
+import Meteors from '@/components/magicui/meteors'
+import { FC, ReactNode } from 'react'
+
+export interface LayoutProps {
+  children?: ReactNode
+}
+
+const Layout: FC<LayoutProps> = ({ children }) => {
+  return (
+    <div className="h-screen w-screen bg-gray-50 bg-[url(@/assets/images/texture.png)] font-sans">
+      <div className="fixed left-0 top-0 h-full w-screen overflow-hidden">
+        <Meteors number={30} />
+      </div>
+      <div className="relative z-10 min-h-screen min-w-screen">{children}</div>
+    </div>
+  )
+}
+
+Layout.displayName = 'Layout'
+export default Layout
diff --git a/src/app/options/components/Main.tsx b/src/app/options/components/Main.tsx
index bdb9413..979abb7 100644
--- a/src/app/options/components/Main.tsx
+++ b/src/app/options/components/Main.tsx
@@ -1,12 +1,12 @@
 import { type ReactNode, type FC } from 'react'
 
-export interface AppLayoutProps {
+export interface MainProps {
   children?: ReactNode
 }
 
-const Main: FC<AppLayoutProps> = ({ children }) => {
+const Main: FC<MainProps> = ({ children }) => {
   return (
-    <main className="grid min-h-screen min-w-screen items-center justify-center bg-gray-50 bg-[url(@/assets/images/texture.png)] font-sans">
+    <main className="grid min-h-screen min-w-screen items-center justify-center">
       <div className="relative rounded-xl bg-slate-50 shadow-lg">{children}</div>
     </main>
   )