From bf7867b263ce8c7c9151e8158fa24319d44275d3 Mon Sep 17 00:00:00 2001
From: alikia2x <ziwen243@outlook.com>
Date: Mon, 15 Jul 2024 12:36:29 +0800
Subject: [PATCH] improve: add layout for about page

---
 package.json           |  2 +-
 pages/about/index.tsx  | 82 +++++++++++++++++++++---------------------
 pages/about/layout.tsx | 10 ++++++
 3 files changed, 51 insertions(+), 43 deletions(-)
 create mode 100644 pages/about/layout.tsx

diff --git a/package.json b/package.json
index 5ff3dfa..61666df 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sparkhome",
   "private": false,
-  "version": "5.5.2",
+  "version": "5.5.3",
   "type": "module",
   "scripts": {
     "dev": "bun server.ts",
diff --git a/pages/about/index.tsx b/pages/about/index.tsx
index 6821644..0d27763 100644
--- a/pages/about/index.tsx
+++ b/pages/about/index.tsx
@@ -1,54 +1,52 @@
 import useDarkMode from "lib/darkModeHook";
 import getVersion, { apiVersion, clientNLUVersion } from "lib/version";
+import AboutLayout from "./layout";
 
 export default function AboutPage() {
     const darkMode = useDarkMode();
 
     return (
-        <div className="dark:bg-[rgb(23,25,29)] dark:text-white min-h-screen w-screen overflow-x-hidden">
-            <main
-                className="relative h-full w-full md:w-3/4 lg:w-1/2 left-0 md:left-[12.5%] lg:left-1/4
-                    pt-12"
-            >
-                <h1 className="text-4xl font-bold mb-6">About SparkHome</h1>
-                <div className="flex mb-8">
-                    <img src="/favicon.ico" className="relative w-20 h-20" />
-                    <div className="flex flex-col ml-4">
-                        <span className="text-3xl font-bold">SparkHome</span>
-                        <p className="mt-2 text-xl">
-                            Made with <span className="text-red-500">♥️</span> by
-                            <a className="underline text-red-500 mx-1" href="https://alikia2x.com">
-                                alikia2x
-                            </a>
-                            from Luminara Studio
-                        </p>
-                    </div>
+        <AboutLayout>
+            <h1 className="text-4xl font-bold mb-6">About SparkHome</h1>
+            <div className="flex mb-8">
+                <img src="/favicon.ico" className="relative w-20 h-20" />
+                <div className="flex flex-col ml-4">
+                    <span className="leading-7 md:leading-9 text-3xl font-bold">SparkHome</span>
+                    <p className="mt-2 leading-5 text-base md:text-xl">
+                        Made with <span className="text-red-500">♥️</span> by
+                        <a className="underline text-red-500 mx-1" href="https://alikia2x.com">
+                            alikia2x
+                        </a>
+                        from Luminara Studio
+                    </p>
                 </div>
+            </div>
 
-                <Version title="Overall Version" version={getVersion()} versionClass="bg-red-500" />
-                <Version
-                    title="Browser NLU Model Version"
-                    version={"Build " + clientNLUVersion}
-                    versionClass="bg-purple-500"
-                />
-                <Version
-                    title="Backend API Version"
-                    version={"/api/v" + apiVersion}
-                    versionClass="bg-orange-500"
-                />
-                <p className="flex items-center my-3">
-                    <span className="font-bold text-2xl mr-4 w-[36rem]">License</span>
-                    <span className="relative px-2 py-1 text-sm font-bold rounded-md text-nowrap underline
-                     bg-green-600 text-white">
-                        <a href="/about/license">→ view</a>
-                    </span>
-                </p>
+            <Version title="Overall Version" version={getVersion()} versionClass="bg-red-500" />
+            <Version
+                title="Browser NLU Model Version"
+                version={"Build " + clientNLUVersion}
+                versionClass="bg-purple-500"
+            />
+            <Version
+                title="Backend API Version"
+                version={"/api/v" + apiVersion}
+                versionClass="bg-orange-500"
+            />
+            <p className="flex items-center my-3">
+                <span className="font-bold text-xl md:text-2xl mr-4 w-[36rem]">License</span>
+                <span
+                    className="relative px-2 py-1 text-sm font-bold rounded-md text-nowrap underline
+                     bg-green-600 text-white"
+                >
+                    <a href="/about/license">→ view</a>
+                </span>
+            </p>
 
-                <p className="relative font-bold text-2xl mt-12">Presented By</p>
-                {!darkMode && <img src="/LuminaraStudio.png" className="relative h-56 mt-6" />}
-                {darkMode && <img src="/LuminaraStudioDark.png" className="relative h-56 mt-6" />}
-            </main>
-        </div>
+            <p className="relative font-bold text-2xl mt-12">Presented By</p>
+            {!darkMode && <img src="/LuminaraStudio.png" className="relative md:h-56 mt-6" />}
+            {darkMode && <img src="/LuminaraStudioDark.png" className="relative md:h-56 mt-6" />}
+        </AboutLayout>
     );
 }
 
@@ -56,7 +54,7 @@ function Version(props: { title: string; version: string; versionClass?: string
     document.title = "About SparkHome";
     return (
         <p className="flex items-center my-3">
-            <span className="font-bold text-2xl mr-4 w-[36rem]">{props.title}</span>
+            <span className="font-bold text-xl md:text-2xl mr-4 w-[36rem]">{props.title}</span>
             <span
                 className={
                     "relative px-2 py-1 text-sm font-bold rounded-md text-nowrap text-white " +
diff --git a/pages/about/layout.tsx b/pages/about/layout.tsx
new file mode 100644
index 0000000..61a0eda
--- /dev/null
+++ b/pages/about/layout.tsx
@@ -0,0 +1,10 @@
+export default function AboutLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <div className="h-screen w-screen overflow-x-hidden bg-white dark:bg-[rgb(23,25,29)]">
+            <main className="relative h-full w-full md:w-3/4 lg:w-1/2 left-0 md:left-[12.5%] lg:left-1/4
+                    pt-12 px-3 md:px-0">
+                {children}
+            </main>
+        </div>
+    );
+}