alikia2x/sparkast
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

improve: add layout for about page

Browse Source
This commit is contained in:
alikia2x 2024-07-15 12:36:29 +08:00
parent 756055a079
commit bf7867b263
3 changed files with 51 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "sparkhome", "name": "sparkhome",
"private": false, "private": false,
"version": "5.5.2", "version": "5.5.3",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "bun server.ts", "dev": "bun server.ts",

82
pages/about/index.tsx
View File

@ -1,54 +1,52 @@
import useDarkMode from "lib/darkModeHook"; import useDarkMode from "lib/darkModeHook";
import getVersion, { apiVersion, clientNLUVersion } from "lib/version"; import getVersion, { apiVersion, clientNLUVersion } from "lib/version";
import AboutLayout from "./layout";
export default function AboutPage() { export default function AboutPage() {
const darkMode = useDarkMode(); const darkMode = useDarkMode();
return ( return (
<div className="dark:bg-[rgb(23,25,29)] dark:text-white min-h-screen w-screen overflow-x-hidden"> <AboutLayout>
<main <h1 className="text-4xl font-bold mb-6">About SparkHome</h1>
className="relative h-full w-full md:w-3/4 lg:w-1/2 left-0 md:left-[12.5%] lg:left-1/4 <div className="flex mb-8">
pt-12" <img src="/favicon.ico" className="relative w-20 h-20" />
> <div className="flex flex-col ml-4">
<h1 className="text-4xl font-bold mb-6">About SparkHome</h1> <span className="leading-7 md:leading-9 text-3xl font-bold">SparkHome</span>
<div className="flex mb-8"> <p className="mt-2 leading-5 text-base md:text-xl">
<img src="/favicon.ico" className="relative w-20 h-20" /> Made with <span className="text-red-500">♥️</span> by
<div className="flex flex-col ml-4"> <a className="underline text-red-500 mx-1" href="https://alikia2x.com">
<span className="text-3xl font-bold">SparkHome</span> alikia2x
<p className="mt-2 text-xl"> </a>
Made with <span className="text-red-500">♥️</span> by from Luminara Studio
<a className="underline text-red-500 mx-1" href="https://alikia2x.com"> </p>
alikia2x
</a>
from Luminara Studio
</p>
</div>
</div> </div>
</div>
<Version title="Overall Version" version={getVersion()} versionClass="bg-red-500" /> <Version title="Overall Version" version={getVersion()} versionClass="bg-red-500" />
<Version <Version
title="Browser NLU Model Version" title="Browser NLU Model Version"
version={"Build " + clientNLUVersion} version={"Build " + clientNLUVersion}
versionClass="bg-purple-500" versionClass="bg-purple-500"
/> />
<Version <Version
title="Backend API Version" title="Backend API Version"
version={"/api/v" + apiVersion} version={"/api/v" + apiVersion}
versionClass="bg-orange-500" versionClass="bg-orange-500"
/> />
<p className="flex items-center my-3"> <p className="flex items-center my-3">
<span className="font-bold text-2xl mr-4 w-[36rem]">License</span> <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 <span
bg-green-600 text-white"> className="relative px-2 py-1 text-sm font-bold rounded-md text-nowrap underline
<a href="/about/license">→ view</a> bg-green-600 text-white"
</span> >
</p> <a href="/about/license">→ view</a>
</span>
</p>
<p className="relative font-bold text-2xl mt-12">Presented By</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="/LuminaraStudio.png" className="relative md:h-56 mt-6" />}
{darkMode && <img src="/LuminaraStudioDark.png" className="relative h-56 mt-6" />} {darkMode && <img src="/LuminaraStudioDark.png" className="relative md:h-56 mt-6" />}
</main> </AboutLayout>
</div>
); );
} }
@ -56,7 +54,7 @@ function Version(props: { title: string; version: string; versionClass?: string
document.title = "About SparkHome"; document.title = "About SparkHome";
return ( return (
<p className="flex items-center my-3"> <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 <span
className={ className={
"relative px-2 py-1 text-sm font-bold rounded-md text-nowrap text-white " + "relative px-2 py-1 text-sm font-bold rounded-md text-nowrap text-white " +

10
pages/about/layout.tsx Normal file
View File

@ -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>
);
}