mirror of
https://github.com/Grasscutters/Cultivation.git
synced 2025-12-14 16:14:48 +01:00
(feat:layout) Scaffold a good layout
This commit is contained in:
KingRainbow44
@@ -2,12 +2,11 @@ root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
max_line_length = 120
|
||||
indent_size = 4
|
||||
indent_style = space
|
||||
|
||||
[*.json]
|
||||
[{*.html,*.json}]
|
||||
indent_size = 2
|
||||
|
||||
11
.prettierrc
Normal file
11
.prettierrc
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"arrowParens": "always",
|
||||
"bracketSpacing": true,
|
||||
"jsxSingleQuote": false,
|
||||
"jsxBracketSameLine": false,
|
||||
"semi": true,
|
||||
"singleQuote": false,
|
||||
"tabWidth": 4,
|
||||
"trailingComma": "none",
|
||||
"useTabs": false
|
||||
}
|
||||
@@ -4,11 +4,10 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Tauri + Peact + TS</title>
|
||||
<title>Cultivation</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<body id="root">
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -10,9 +10,13 @@
|
||||
"tauri": "tauri"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "npm:@preact/compat",
|
||||
"react-dom": "npm:@preact/compat",
|
||||
"@fluentui/react-components": "^9.41.0",
|
||||
"@tauri-apps/api": "^1.5.1",
|
||||
"preact": "^10.16.0",
|
||||
"react-icons": "^4.12.0",
|
||||
"react-router-dom": "^6.20.0",
|
||||
"zustand": "^4.4.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
.logo.vite:hover {
|
||||
filter: drop-shadow(0 0 2em #747bff);
|
||||
}
|
||||
|
||||
.logo.preact:hover {
|
||||
filter: drop-shadow(0 0 2em #673ab8);
|
||||
}
|
||||
53
src/App.tsx
53
src/App.tsx
@@ -1,53 +0,0 @@
|
||||
import { useState } from "preact/hooks";
|
||||
import preactLogo from "./assets/preact.svg";
|
||||
import { invoke } from "@tauri-apps/api/tauri";
|
||||
import "./App.css";
|
||||
|
||||
function App() {
|
||||
const [greetMsg, setGreetMsg] = useState("");
|
||||
const [name, setName] = useState("");
|
||||
|
||||
async function greet() {
|
||||
// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
|
||||
setGreetMsg(await invoke("greet", { name }));
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="container">
|
||||
<h1>Welcome to Tauri!</h1>
|
||||
|
||||
<div class="row">
|
||||
<a href="https://vitejs.dev" target="_blank">
|
||||
<img src="/vite.svg" class="logo vite" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://tauri.app" target="_blank">
|
||||
<img src="/tauri.svg" class="logo tauri" alt="Tauri logo" />
|
||||
</a>
|
||||
<a href="https://preactjs.com" target="_blank">
|
||||
<img src={preactLogo} class="logo preact" alt="Preact logo" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p>Click on the Tauri, Vite, and Preact logos to learn more.</p>
|
||||
|
||||
<form
|
||||
class="row"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
greet();
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="greet-input"
|
||||
onInput={(e) => setName(e.currentTarget.value)}
|
||||
placeholder="Enter a name..."
|
||||
/>
|
||||
<button type="submit">Greet</button>
|
||||
</form>
|
||||
|
||||
<p>{greetMsg}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="27.68" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 296"><path fill="#673AB8" d="m128 0l128 73.9v147.8l-128 73.9L0 221.7V73.9z"/><path fill="#FFF" d="M34.865 220.478c17.016 21.78 71.095 5.185 122.15-34.704c51.055-39.888 80.24-88.345 63.224-110.126c-17.017-21.78-71.095-5.184-122.15 34.704c-51.055 39.89-80.24 88.346-63.224 110.126Zm7.27-5.68c-5.644-7.222-3.178-21.402 7.573-39.253c11.322-18.797 30.541-39.548 54.06-57.923c23.52-18.375 48.303-32.004 69.281-38.442c19.922-6.113 34.277-5.075 39.92 2.148c5.644 7.223 3.178 21.403-7.573 39.254c-11.322 18.797-30.541 39.547-54.06 57.923c-23.52 18.375-48.304 32.004-69.281 38.441c-19.922 6.114-34.277 5.076-39.92-2.147Z"/><path fill="#FFF" d="M220.239 220.478c17.017-21.78-12.169-70.237-63.224-110.126C105.96 70.464 51.88 53.868 34.865 75.648c-17.017 21.78 12.169 70.238 63.224 110.126c51.055 39.889 105.133 56.485 122.15 34.704Zm-7.27-5.68c-5.643 7.224-19.998 8.262-39.92 2.148c-20.978-6.437-45.761-20.066-69.28-38.441c-23.52-18.376-42.74-39.126-54.06-57.923c-10.752-17.851-13.218-32.03-7.575-39.254c5.644-7.223 19.999-8.261 39.92-2.148c20.978 6.438 45.762 20.067 69.281 38.442c23.52 18.375 42.739 39.126 54.06 57.923c10.752 17.85 13.218 32.03 7.574 39.254Z"/><path fill="#FFF" d="M127.552 167.667c10.827 0 19.603-8.777 19.603-19.604c0-10.826-8.776-19.603-19.603-19.603c-10.827 0-19.604 8.777-19.604 19.603c0 10.827 8.777 19.604 19.604 19.604Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
4
src/constants.ts
Normal file
4
src/constants.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export const PageRoutes = {
|
||||
HOME: "/",
|
||||
SETTINGS: "/settings"
|
||||
};
|
||||
15
src/main.tsx
15
src/main.tsx
@@ -1,5 +1,14 @@
|
||||
import { render } from "preact";
|
||||
import App from "./App";
|
||||
import "./styles.css";
|
||||
|
||||
render(<App />, document.getElementById("root")!);
|
||||
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||
|
||||
import App from "@ui/App";
|
||||
|
||||
export const router = createBrowserRouter([
|
||||
{ path: "*", element: <App /> }
|
||||
]);
|
||||
|
||||
render(
|
||||
<RouterProvider router={router} />,
|
||||
document.getElementById("root")!
|
||||
);
|
||||
|
||||
109
src/styles.css
109
src/styles.css
@@ -1,109 +0,0 @@
|
||||
:root {
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
|
||||
color: #0f0f0f;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0;
|
||||
padding-top: 10vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: 0.75s;
|
||||
}
|
||||
|
||||
.logo.tauri:hover {
|
||||
filter: drop-shadow(0 0 2em #24c8db);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
color: #0f0f0f;
|
||||
background-color: #ffffff;
|
||||
transition: border-color 0.25s;
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: #396cd8;
|
||||
}
|
||||
button:active {
|
||||
border-color: #396cd8;
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#greet-input {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
color: #f6f6f6;
|
||||
background-color: #2f2f2f;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #24c8db;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
color: #ffffff;
|
||||
background-color: #0f0f0f98;
|
||||
}
|
||||
button:active {
|
||||
background-color: #0f0f0f69;
|
||||
}
|
||||
}
|
||||
22
src/ui/App.tsx
Normal file
22
src/ui/App.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import { Route, Routes } from "react-router-dom";
|
||||
|
||||
import TopBar from "@components/TopBar.tsx";
|
||||
import Launcher from "@ui/layout/Launcher.tsx";
|
||||
|
||||
import { PageRoutes } from "@app/constants.ts";
|
||||
|
||||
import "@css/App.scss";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className={"App"}>
|
||||
<TopBar />
|
||||
|
||||
<Routes>
|
||||
<Route path={PageRoutes.HOME} element={<Launcher />} />
|
||||
</Routes>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
9
src/ui/components/InfoBoard.tsx
Normal file
9
src/ui/components/InfoBoard.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
function InfoBoard() {
|
||||
return (
|
||||
<div className={"InfoBoard"}>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default InfoBoard;
|
||||
9
src/ui/components/NewsFeed.tsx
Normal file
9
src/ui/components/NewsFeed.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
function NewsFeed() {
|
||||
return (
|
||||
<div class={"NewsFeed"}>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default NewsFeed;
|
||||
9
src/ui/components/TopBar.tsx
Normal file
9
src/ui/components/TopBar.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
function TopBar() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TopBar;
|
||||
0
src/ui/css/App.scss
Normal file
0
src/ui/css/App.scss
Normal file
24
src/ui/layout/Launcher.tsx
Normal file
24
src/ui/layout/Launcher.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import NewsFeed from "@components/NewsFeed.tsx";
|
||||
import InfoBoard from "@components/InfoBoard.tsx";
|
||||
import { Button } from "@fluentui/react-components";
|
||||
|
||||
function Launcher() {
|
||||
return (
|
||||
<div className={"App_Body"}>
|
||||
<div>
|
||||
<NewsFeed />
|
||||
<InfoBoard />
|
||||
|
||||
<Button>
|
||||
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Launcher;
|
||||
1
src/vite-env.d.ts
vendored
1
src/vite-env.d.ts
vendored
@@ -1 +0,0 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -19,7 +19,19 @@
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
|
||||
/* Path aliases */
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@app/*": ["src/*"],
|
||||
"@ui/*": ["src/ui/*"],
|
||||
"@css/*": ["src/ui/css/*"],
|
||||
"@components/*": ["src/ui/components/*"],
|
||||
"@backend/*": ["src/backend/*"],
|
||||
"react": ["./node_modules/preact/compat/"],
|
||||
"react-dom": ["./node_modules/preact/compat/"]
|
||||
},
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
|
||||
Reference in New Issue
Block a user