feat(website): add app dir (#8869)

Co-authored-by: iCrawl <buechler.noel@outlook.com>
2026-03-14 18:43:31 +01:00 · 2022-11-27 10:24:34 -05:00
parent decbce4010
commit 12553da135
49 changed files with 941 additions and 953 deletions
--- a/apps/website/src/components/Header.tsx
+++ b/apps/website/src/components/Header.tsx
@@ -0,0 +1,123 @@
+'use client';
+
+import { Button } from 'ariakit/button';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useTheme } from 'next-themes';
+import { Fragment, useEffect, useMemo, useState } from 'react';
+import { FiCommand } from 'react-icons/fi';
+import { VscColorMode, VscGithubInverted, VscMenu, VscSearch } from 'react-icons/vsc';
+import { useCmdK } from '~/contexts/cmdK';
+import { useNav } from '~/contexts/nav';
+
+export function Header() {
+	const pathname = usePathname();
+	// eslint-disable-next-line @typescript-eslint/unbound-method
+	const { setOpened } = useNav();
+	const { resolvedTheme, setTheme } = useTheme();
+	const dialog = useCmdK();
+	const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
+	const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
+
+	useEffect(() => {
+		setAsPathWithoutQueryAndAnchor(pathname?.split('?')[0]?.split('#')[0] ?? '');
+	}, [pathname]);
+
+	const asPathWithoutContainerKey = useMemo(
+		() => asPathWithoutQueryAndAnchor?.split(':')[0] ?? '',
+		[asPathWithoutQueryAndAnchor],
+	);
+
+	const pathElements = useMemo(
+		() =>
+			asPathWithoutContainerKey
+				.split('/')
+				.slice(1)
+				.map((path, idx, original) => (
+					<Link
+						className="focus:ring-width-2 focus:ring-blurple rounded outline-0 hover:underline focus:ring"
+						href={`/${original.slice(0, idx + 1).join('/')}`}
+						key={idx}
+					>
+						{path}
+					</Link>
+				)),
+		[asPathWithoutContainerKey],
+	);
+
+	const breadcrumbs = useMemo(
+		() =>
+			pathElements.flatMap((el, idx, array) => {
+				if (idx === 0) {
+					return (
+						<Fragment key={idx}>
+							<div className="mx-2">/</div>
+							{el}
+							<div className="mx-2">/</div>
+						</Fragment>
+					);
+				}
+
+				if (idx !== array.length - 1) {
+					return (
+						<Fragment key={idx}>
+							{el}
+							<div className="mx-2">/</div>
+						</Fragment>
+					);
+				}
+
+				return <Fragment key={idx}>{el}</Fragment>;
+			}),
+		[pathElements],
+	);
+
+	return (
+		<header className="dark:bg-dark-600 dark:border-dark-100 bg-light-600 border-light-800 fixed top-0 left-0 z-20 w-full border-b">
+			<div className="h-18 block px-6">
+				<div className="flex h-full flex-row place-content-between place-items-center">
+					<Button
+						aria-label="Menu"
+						className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px lg:hidden"
+						onClick={() => setOpened((open) => !open)}
+					>
+						<VscMenu size={24} />
+					</Button>
+					<div className="hidden md:flex md:flex-row md:overflow-hidden">{breadcrumbs}</div>
+					<div className="flex flex-row place-items-center gap-4">
+						<Button
+							as="div"
+							className="dark:bg-dark-800 focus:ring-width-2 focus:ring-blurple rounded bg-white px-4 py-2.5 outline-0 focus:ring"
+							onClick={() => dialog?.toggle()}
+						>
+							<div className="flex flex-row place-items-center gap-4">
+								<VscSearch size={18} />
+								<span className="opacity-65">Search...</span>
+								<div className="md:opacity-65 hidden md:flex md:flex-row md:place-items-center md:gap-2">
+									<FiCommand size={18} /> K
+								</div>
+							</div>
+						</Button>
+						<Button
+							aria-label="GitHub"
+							as="a"
+							className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
+							href="https://github.com/discordjs/discord.js"
+							rel="noopener noreferrer"
+							target="_blank"
+						>
+							<VscGithubInverted size={24} />
+						</Button>
+						<Button
+							aria-label="Toggle theme"
+							className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded-full rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
+							onClick={() => toggleTheme()}
+						>
+							<VscColorMode size={24} />
+						</Button>
+					</div>
+				</div>
+			</div>
+		</header>
+	);
+}