From 39dd28a60cb5404fe471cb169c6d4a9c44e8e9ab Mon Sep 17 00:00:00 2001 From: lonkaars Date: Fri, 23 Apr 2021 12:37:56 +0200 Subject: added 404 and maintenance pages --- components/navbar.tsx | 77 +++++++++++++++++++++++++++------------------------ pages/404.tsx | 39 ++++++++++++++++++++++++++ pages/maintenance.tsx | 42 ++++++++++++++++++++++++++++ pages/search.tsx | 2 +- styles/ui.css | 18 ++++++++++++ 5 files changed, 141 insertions(+), 37 deletions(-) create mode 100644 pages/404.tsx create mode 100644 pages/maintenance.tsx diff --git a/components/navbar.tsx b/components/navbar.tsx index 5ce43bb..f7d2491 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -15,7 +15,9 @@ import SearchIcon from '@material-ui/icons/Search'; import SettingsIcon from '@material-ui/icons/Settings'; import VideogameAssetIcon from '@material-ui/icons/VideogameAsset'; -export function NavBar() { +export function NavBar(props: { + nolinks?: boolean; +}) { var [loggedIn, setLoggedIn] = useState(false); var [gotData, setGotData] = useState(false); @@ -58,42 +60,45 @@ export function NavBar() {
- - - - - - - {false && - - } - - - + {!props.nolinks + && <> + + + + + + + {false && + + } + + + -
- {loggedIn && -
setNotificationsAreaVisible(!notificationsAreaVisible)} - > - - {gotNotifications &&
} +
+ {loggedIn && + - - } - - {loggedIn - ? - : } - - {loggedIn && - - } -
+ }
; } diff --git a/pages/404.tsx b/pages/404.tsx new file mode 100644 index 0000000..2768428 --- /dev/null +++ b/pages/404.tsx @@ -0,0 +1,39 @@ +import { Footer } from '../components/footer'; +import { NavBar } from '../components/navbar'; +import { CenteredPage, PageTitle } from '../components/page'; +import { IconLabelButton, Vierkant } from '../components/ui'; + +import HomeIcon from '@material-ui/icons/Home'; + +export default function FourOhFourPage() { + return
+ + + 404 + + + + + +

De pagina die je probeert te bezoeken bestaat niet

+ } /> + + +
+
; +} diff --git a/pages/maintenance.tsx b/pages/maintenance.tsx new file mode 100644 index 0000000..8abecc6 --- /dev/null +++ b/pages/maintenance.tsx @@ -0,0 +1,42 @@ +import { NavBar } from '../components/navbar'; +import { CenteredPage, PageTitle } from '../components/page'; +import { IconLabelButton, Vierkant } from '../components/ui'; + +import { mdiDiscord } from '@mdi/js'; +import Icon from '@mdi/react'; + +export default function MaintenancePage() { + return
+ + + Onderhoud + + + + +

+ Er worden momenteel cruciale onderdelen van de website aangepast waardoor de website niet te + bezoeken is. Voor updates of details over dit probleem kun je in{" "} + #important kijken op onze Discord server. +

+ } + /> + + +
; +} diff --git a/pages/search.tsx b/pages/search.tsx index 99f99b0..ceb83f4 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -67,7 +67,7 @@ function BigSearchBar(props: { ; } -export default function HomePage() { +export default function SearchPage() { var [searched, setSearched] = useState(false); var [results, setResults] = useState>([]); var getSearchResults = (event?: FormEvent) => { diff --git a/styles/ui.css b/styles/ui.css index ee71071..31df20a 100644 --- a/styles/ui.css +++ b/styles/ui.css @@ -119,3 +119,21 @@ html.dark .dialogbox { background-color: var(--gray-700); } border-radius: 9999999px; } +.messagePage .button { + float: none; +} + +.messagePage > * { margin-bottom: var(--spacing-large); } +.messagePage > *:last-child { margin-bottom: 0; } + +.messagePage .harry { + width: 128px; + height: 128px; +} + +.messagePage p { + max-width: 623px; + margin: 0 auto; + margin-bottom: var(--spacing-large); +} + -- cgit v1.2.3