Add more home buttons & Add content disclaimer

i added a place to add credits; will do next probs

src/handbook/package.json

@@ -21,6 +21,7 @@
     "@types/react-dom": "^18.0.11",
 
     "vite": "^4.2.0",
+    "vite-plugin-svgr": "^2.4.0",
     "vite-tsconfig-paths": "^4.0.7",
     "vite-plugin-singlefile": "^0.13.5",
     "@vitejs/plugin-react-swc": "^3.0.0",

src/handbook/src/backend/icons.d.ts

@@ -0,0 +1,3 @@
+declare module "*.svg" {
+    export const ReactComponent: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+}

src/handbook/src/css/views/Content.scss

@@ -4,19 +4,24 @@
     width: 100%;
 
     background-color: var(--background-color);
+    flex-direction: column;
+    justify-content: space-between;
 }
 
 .Content_Top {
     display: flex;
     width: 100%;
+    height: 80%;
 
     flex-direction: column;
     align-items: center;
+
+    gap: 24px;
 }
 
 .Content_Title {
     margin-top: 31px;
-    margin-bottom: 39px;
+    margin-bottom: 15px;
 }
 
 .Content_Buttons {
@@ -25,8 +30,77 @@
 
     max-width: 1376px;
     max-height: 256px;
+
+    gap: 24px;
+    justify-content: center;
+    flex-wrap: wrap;
 }
 
 .Content_Bottom {
+    display: flex;
+
+    height: 50%;
+    max-height: 125px;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.Content_Box {
+    display: flex;
+    background-color: var(--secondary-color);
+}
+
+.Content_Disclaimer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    background-color: var(--secondary-color);
+
+    width: 50%;
+    height: 100%;
+    max-width: 630px;
+    max-height: 93px;
+
+    margin: 0 24px 0 60px;
+    border-radius: 10px;
+
+    box-sizing: border-box;
+    padding: 11px;
+
+    :nth-child(1) {
+        font-size: 24px;
+        max-height: 30px;
+
+        display: flex;
+        flex-direction: column;
+    }
+
+    p {
+        font-size: 18px;
+        max-height: 40px;
+    }
+}
+
+.Content_Discord {
+    max-height: 40px;
+    max-width: 150px;
+
+    gap: 8px;
+    align-self: center;
+    align-items: center;
+
+    svg {
+        width: 100%;
+        height: 100%;
+        max-width: 44px;
+        max-height: 30px;
+    }
+
+    p {
+        font-size: 16px;
+    }
+}
+
+.Content_Credits {
 
 }

src/handbook/src/css/widgets/HomeButton.scss

@@ -12,6 +12,8 @@
     align-items: center;
     justify-content: center;
     gap: 20px;
+
+    border-radius: 10px;
 }
 
 .HomeButton_Icon {

src/handbook/src/icons/discord.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="图层_2" data-name="图层 2"><g id="Discord_Logos" data-name="Discord Logos"><g id="Discord_Logo_-_Large_-_White" data-name="Discord Logo - Large - White"><path class="cls-1" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></g></g></g></svg>

src/handbook/src/ui/views/Content.tsx

@@ -1,8 +1,11 @@
 import React from "react";
 
-import "@css/views/Content.scss";
 import HomeButton from "@app/ui/widgets/HomeButton";
 
+import { ReactComponent as DiscordLogo } from "@icons/discord.svg";
+
+import "@css/views/Content.scss";
+
 class Content extends React.Component<any, any> {
     constructor(props: any) {
         super(props);
@@ -16,11 +19,35 @@ class Content extends React.Component<any, any> {
 
                     <div className={"Content_Buttons"}>
                         <HomeButton name={"Commands"} anchor={"commands"} />
+                        <HomeButton name={"Characters"} anchor={"avatars"} />
+                        <HomeButton name={"Items"} anchor={"items"} />
+                        <HomeButton name={"Entities"} anchor={"monsters"} />
+                        <HomeButton name={"Scenes"} anchor={"scenes"} />
+                    </div>
+
+                    <div className={"Content_Buttons"}>
+                        <HomeButton name={"Quests"} anchor={"quests"} />
+                        <HomeButton name={"Achievements"} anchor={"achievements"} />
                     </div>
                 </div>
 
                 <div className={"Content_Bottom"}>
+                    <div className={"Content_Box Content_Disclaimer"}>
+                        <div>
+                            <p>This tool is not affiliated with HoYoverse.</p>
+                            <p>Genshin Impact, game content and materials are</p>
+                            <p>trademarks and copyrights of HoYoverse.</p>
+                        </div>
 
+                        <div className={"Content_Discord"}>
+                            <DiscordLogo />
+                            <p>Join the Community!</p>
+                        </div>
+                    </div>
+
+                    <div className={"Content_Text"}>
+
+                    </div>
                 </div>
             </div>
         );

src/handbook/vite.config.ts

@@ -3,12 +3,13 @@
 import { defineConfig } from "vite";
 
 import react from "@vitejs/plugin-react-swc";
+import viteSvgr from "vite-plugin-svgr";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 import postcss from "./cfg/postcss.config.js";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [ react(), tsconfigPaths() ],
+    plugins: [ react(), tsconfigPaths(), viteSvgr() ],
     css: { postcss }
 });