mirror of
https://github.com/NebulaServices/Nebula.git
synced 2025-05-17 13:30:00 -04:00
Major header and routing improvments
This commit is contained in:
rift
parent
226560dc52
commit
25c4a1e9ce
5 changed files with 58 additions and 80 deletions
20
package-lock.json
generated
20
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
import { useLocation } from "preact-iso";
|
||||
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 { HeaderButton } from "./HeaderButton";
|
||||
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, i18n } = useTranslation();
|
||||
const { t } = 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">
|
||||
<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
|
||||
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>
|
||||
<HeaderButton href="/games" Icon={HiOutlineCube} translationKey="header.games" />
|
||||
<HeaderButton href="/settings" Icon={RxMixerVertical} translationKey="header.settings" />
|
||||
<HeaderButton href="/discord" Icon={RiLinksFill} translationKey="header.discord" />
|
||||
</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
|
||||
22
src/components/HeaderButton.tsx
Normal file
22
src/components/HeaderButton.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue