fix(website): navigation and 404

This commit is contained in:
iCrawl 2023-04-11 19:19:33 +02:00
parent dcf8757d35
commit 78e02c4b63
No known key found for this signature in database
GPG key ID: 1AB888B16355FBB2
8 changed files with 40 additions and 33 deletions

View file

@ -1 +0,0 @@
export { default } from '~/app/loading';

View file

@ -0,0 +1,22 @@
'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
export default function NotFound() {
const pathname = usePathname();
const href = pathname.split('/').slice(0, -1).join('/');
return (
<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
<Link
className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"
href={href}
>
Take me back
</Link>
</div>
);
}

View file

@ -140,5 +140,13 @@ function Member({ member }: { member?: ApiItem }) {
export default async function Page({ params }: { params: ItemRouteParams }) {
const member = await fetchMember(params);
return <div className="relative top-6">{member ? <Member member={member} /> : null}</div>;
if (!member) {
notFound();
}
return (
<div className="relative top-6">
<Member member={member} />
</div>
);
}

View file

@ -1 +0,0 @@
export { default } from '~/app/loading';

View file

@ -2,15 +2,12 @@
import { ThemeProvider } from 'next-themes';
import type { PropsWithChildren } from 'react';
import { ServiceWorker } from '~/components/ServiceWorker';
import { SystemThemeFallback } from '~/components/SystemThemeFallback';
import { useSystemThemeFallback } from '~/hooks/useSystemThemeFallback';
import { useUnregisterServiceWorker } from '~/hooks/useUnregisterServiceWorker';
export function Providers({ children }: PropsWithChildren) {
return (
<>
<ThemeProvider attribute="class">{children}</ThemeProvider>
<ServiceWorker />
<SystemThemeFallback />
</>
);
useUnregisterServiceWorker();
useSystemThemeFallback();
return <ThemeProvider attribute="class">{children}</ThemeProvider>;
}

View file

@ -1,9 +0,0 @@
'use client';
import { useUnregisterServiceWorker } from '~/hooks/useUnregisterServiceWorker';
export function ServiceWorker() {
useUnregisterServiceWorker();
return null;
}

View file

@ -7,7 +7,7 @@ import { VscSymbolField } from '@react-icons/all-files/vsc/VscSymbolField';
import { VscSymbolInterface } from '@react-icons/all-files/vsc/VscSymbolInterface';
import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
import { VscSymbolVariable } from '@react-icons/all-files/vsc/VscSymbolVariable';
import { usePathname } from 'next/navigation';
import { useSelectedLayoutSegment } from 'next/navigation';
import { useMemo } from 'react';
import { ItemLink } from './ItemLink';
import { Section } from './Section';
@ -83,7 +83,7 @@ function resolveIcon(item: string) {
}
export function Sidebar({ members }: { members: SidebarSectionItemData[] }) {
const pathname = usePathname();
const segment = useSelectedLayoutSegment();
const { setOpened } = useNav();
const groupItems = useMemo(() => groupMembers(members), [members]);
@ -97,7 +97,7 @@ export function Sidebar({ members }: { members: SidebarSectionItemData[] }) {
{groupItems[group].map((member, index) => (
<ItemLink
className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l p-[5px] pl-6 outline-0 focus:rounded focus:border-0 focus:ring ${
pathname === member.href
decodeURIComponent(segment ?? '') === member.href
? 'bg-blurple text-white'
: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'
}`}

View file

@ -1,9 +0,0 @@
'use client';
import { useSystemThemeFallback } from '~/hooks/useSystemThemeFallback';
export function SystemThemeFallback() {
useSystemThemeFallback();
return null;
}