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",

28
pages/about/index.tsx
View File

@ -1,21 +1,18 @@
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
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> <h1 className="text-4xl font-bold mb-6">About SparkHome</h1>
<div className="flex mb-8"> <div className="flex mb-8">
<img src="/favicon.ico" className="relative w-20 h-20" /> <img src="/favicon.ico" className="relative w-20 h-20" />
<div className="flex flex-col ml-4"> <div className="flex flex-col ml-4">
<span className="text-3xl font-bold">SparkHome</span> <span className="leading-7 md:leading-9 text-3xl font-bold">SparkHome</span>
<p className="mt-2 text-xl"> <p className="mt-2 leading-5 text-base md:text-xl">
Made with <span className="text-red-500">♥️</span> by Made with <span className="text-red-500">♥️</span> by
<a className="underline text-red-500 mx-1" href="https://alikia2x.com"> <a className="underline text-red-500 mx-1" href="https://alikia2x.com">
alikia2x alikia2x
@ -37,18 +34,19 @@ export default function AboutPage() {
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
bg-green-600 text-white"
>
<a href="/about/license">→ view</a> <a href="/about/license">→ view</a>
</span> </span>
</p> </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>
);
}