update: setup layouts and basic ui

This commit is contained in:
purp1e
2024-09-20 23:15:42 +08:00
parent d092be3370
commit 09707cd5f6
29 changed files with 433 additions and 60 deletions

View File

@@ -0,0 +1,3 @@
export default function Page() {
return <div>Console</div>;
}

View File

@@ -0,0 +1,3 @@
export default function Page() {
return <div>Gear</div>;
}

View File

@@ -0,0 +1,13 @@
"use client";
import Notice from "@/components/cstb/Notice";
const Home = () => {
return (
<section>
<Notice />
</section>
);
};
export default Home;

25
src/app/(main)/layout.tsx Normal file
View File

@@ -0,0 +1,25 @@
import Header from "@/components/window/Header";
import Nav from "@/components/window/Nav";
import SideBar from "@/components/window/SideBar";
export default function BaseLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div className="bg-[#f1f0f2] h-screen w-full">
<Nav />
<div className="flex flex-col w-full h-full">
<SideBar />
<main className="pb-5 pr-5 ml-20">
<Header />
{children}
</main>
</div>
</div>
);
}

View File

@@ -0,0 +1,3 @@
export default function Page() {
return <div>Movie</div>;
}

View File

@@ -0,0 +1,3 @@
export default function Page() {
return <div>Preference</div>;
}

View File

@@ -0,0 +1,3 @@
export default function Page() {
return <div>Tool</div>;
}

8
src/app/_app.tsx Normal file
View File

@@ -0,0 +1,8 @@
import "@/styles/globals.css"
import type { AppProps } from "next/app"
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
export default MyApp

23
src/app/globals.css Normal file
View File

@@ -0,0 +1,23 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
background: transparent;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}

19
src/app/layout.tsx Normal file
View File

@@ -0,0 +1,19 @@
export const metadata = {
title: "CS工具箱",
description: "Generated by Next.js",
icons: ["/favicon.ico"],
};
import "./globals.css";
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}

20
src/app/page.tsx Normal file
View File

@@ -0,0 +1,20 @@
"use client";
import { useRouter } from "next/navigation";
const Home = () => {
const router = useRouter();
return (
<main className="bg-[#f1f0f2] h-screen w-full flex flex-col gap-6 items-center justify-center">
<h1 className="text-4xl font-bold text-zinc-800">CS </h1>
<button
onClick={() => router.push("/home")}
className="px-4 py-1 rounded bg-zinc-200"
>
</button>
</main>
);
};
export default Home;

58
src/app/test/page.tsx Normal file
View File

@@ -0,0 +1,58 @@
"use client"
import { CardButton } from "@/components/test/CardButton";
import { useGlobalShortcut } from "@/hooks/tauri/shortcuts";
import { invoke } from "@tauri-apps/api/core";
import { useCallback, useState } from "react";
export default function Page() {
const [buttonDesc, setButtonDesc] = useState<string>(
"Waiting to be clicked. This calls 'on_button_clicked' from Rust."
);
const onButtonClick = () => {
invoke<string>("on_button_clicked")
.then((value) => {
setButtonDesc(value);
})
.catch(() => {
setButtonDesc("Failed to invoke Rust command 'on_button_clicked'");
});
};
const shortcutHandler = useCallback(() => {
console.log("Ctrl+P was pressed!");
}, []);
useGlobalShortcut("CommandOrControl+P", shortcutHandler);
return (
<div className="flex flex-col">
<main className="flex flex-col items-center justify-center flex-1 py-8">
<h1 className="m-0 text-6xl text-center">
Welcome to{" "}
<a
href="https://nextjs.org"
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 hover:underline focus:underline active:underline"
>
Next.js!
</a>
</h1>
<p className="my-12 text-2xl leading-9 text-center">
Get started by editing{" "}
<code className="p-2 font-mono text-xl bg-gray-200 rounded-md">
src/pages/index.tsx
</code>
</p>
<div className="flex flex-wrap items-center justify-center max-w-3xl">
<CardButton
onClick={onButtonClick}
title="Tauri Invoke"
description={buttonDesc}
/>
</div>
</main>
</div>
);
}