Major header and routing improvments

package-lock.json

@@ -12,7 +12,9 @@
 				"preact": "^10.13.1",
 				"preact-iso": "^2.3.2",
 				"preact-render-to-string": "^6.3.1",
-				"react-i18next": "^13.5.0"
+				"preact-router": "^4.1.2",
+				"react-i18next": "^13.5.0",
+				"react-icons": "^4.12.0"
 			},
 			"devDependencies": {
 				"@preact/preset-vite": "^2.5.0",
@@ -4188,6 +4190,14 @@
 				"preact": ">=10"
 			}
 		},
+		"node_modules/preact-router": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/preact-router/-/preact-router-4.1.2.tgz",
+			"integrity": "sha512-uICUaUFYh+XQ+6vZtQn1q+X6rSqwq+zorWOCLWPF5FAsQh3EJ+RsDQ9Ee+fjk545YWQHfUxhrBAaemfxEnMOUg==",
+			"peerDependencies": {
+				"preact": ">=10"
+			}
+		},
 		"node_modules/prelude-ls": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -4275,6 +4285,14 @@
 				}
 			}
 		},
+		"node_modules/react-icons": {
+			"version": "4.12.0",
+			"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
+			"integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==",
+			"peerDependencies": {
+				"react": "*"
+			}
+		},
 		"node_modules/react-is": {
 			"version": "16.13.1",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -14,7 +14,9 @@
 		"preact": "^10.13.1",
 		"preact-iso": "^2.3.2",
 		"preact-render-to-string": "^6.3.1",
-		"react-i18next": "^13.5.0"
+		"preact-router": "^4.1.2",
+		"react-i18next": "^13.5.0",
+		"react-icons": "^4.12.0"
 	},
 	"devDependencies": {
 		"@preact/preset-vite": "^2.5.0",

src/components/Header.tsx

@@ -1,14 +1,13 @@
-import { useLocation } from "preact-iso";
+import { HeaderButton } from "./HeaderButton";
-import LinkSvg from "../assets/link.svg";
-import LogoSvg from "../assets/logo.svg";
-import GamesSvg from '../assets/games.svg';
-
-import { useState, useEffect } from "preact/hooks"
 import { useTranslation } from 'react-i18next';
 
+// Header icons
+import { HiOutlineCube } from "react-icons/hi";
+import { RxMixerVertical } from "react-icons/rx";
+import { RiLinksFill } from "react-icons/ri";
+
 export function Header() {
-  const { url } = useLocation();
+  const { t } = useTranslation();
-  const { t, i18n } = useTranslation();
 
   return (
     <div id="navbar" className="h-16 px-4 bg-navbar-color flex flex-row items-center justify-between">
@@ -20,75 +19,11 @@ export function Header() {
 			</a>
 			<div className="w-1/2">
 				<div className="flex flex-row justify-end items-center">
-					<a href="/games">
+					<HeaderButton href="/games" Icon={HiOutlineCube} translationKey="header.games" />
-						<div class="p-4 flex flex-row items-center">
+					<HeaderButton href="/settings" Icon={RxMixerVertical} translationKey="header.settings" />
-							<svg
+					<HeaderButton href="/discord" Icon={RiLinksFill} translationKey="header.discord" />
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke-width="1.5"
-								stroke="currentColor"
-								class="w-6 h-6"
-								style="width: 23px"
-							>
-							<path
-								style="fill: #ffffff00"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
-							/>
-							</svg>
-							<span className="text-text-color text-lg pl-1 font-roboto font-bold">{t('header.games')}</span>
-						</div>
-					</a>
-					<a href="/settings">
-						<div class="p-4 flex flex-row items-center">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke-width="1.5"
-								stroke="currentColor"
-								class="w-6 h-6"
-								style="width: 23px"
-							>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5"
-							/>
-							</svg>
-							<span className="text-text-color text-lg pl-1 font-roboto font-bold">{t('header.settings')}</span>
-						</div>
-					</a>
-					<a href="/discord">
-						<div class="p-4 flex flex-row items-center">
-							<svg
-								style="width: 23px"
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke-width="1.5"
-								stroke="currentColor"
-								class="w-6 h-6"
-							>
-							<path
-								style="fill: #ffffff00"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
-							/>
-							</svg>
-							<span className="text-text-color text-lg pl-1 font-roboto font-bold">{t('header.discord')}</span>
-						</div>
-					</a>
 				</div>
 			</div>
     </div>
   );
-}
+}
-// yes i got itdfsdsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
-// @madjikun do the DAMN CSS
-// clock in middle, logo on left, buttons on side yk
-
-// oh yeah go to the liveshare tab then click on the shared serer

src/components/HeaderButton.tsx

@@ -0,0 +1,22 @@
+import { useTranslation } from "react-i18next";
+import { Link } from 'preact-router';
+
+interface HeaderButtonProps {
+    href: string;
+    Icon: any;
+    translationKey: string;
+}
+
+export function HeaderButton(props: HeaderButtonProps) {
+    const { href, Icon, translationKey } = props;
+    const { t } = useTranslation();
+
+    return (
+        <Link href={href}>
+            <div class="p-4 flex flex-row items-center">
+                <Icon class="w-6 h-6"/>
+                <span className="text-text-color text-lg pl-1 font-roboto font-bold">{t(translationKey)}</span>
+            </div>
+        </Link>
+    )
+}

src/pages/_404.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import { Link } from 'preact-router';
 
 export function NotFound() {
 	const { t } = useTranslation()
@@ -10,9 +11,9 @@ export function NotFound() {
 					<p class="text-4xl font-roboto font-bold">{t('404.text')}</p>
 					<span class="text-3xl font-roboto">404</span>
 				</div>
-				<a href="/">
+				<Link href="/">
 					<button class="p-2 border border-input-border-color rounded-2xl h-14 w-44 text-center bg-input text-xl placeholder:text-input-text focus:outline-none font-roboto">{t('404.return')}</button>
-				</a>
+				</Link>
 			</div>
 		</section>
 	);