feat(website): render syntax and mdx on the server (#9086)

apps/website/src/components/Header.tsx

@@ -1,25 +1,21 @@
 'use client';
 
 import { FiCommand } from '@react-icons/all-files/fi/FiCommand';
-// import { VscColorMode } from '@react-icons/all-files/vsc/VscColorMode';
 import { VscGithubInverted } from '@react-icons/all-files/vsc/VscGithubInverted';
 import { VscMenu } from '@react-icons/all-files/vsc/VscMenu';
 import { VscSearch } from '@react-icons/all-files/vsc/VscSearch';
 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 { ThemeSwitcher } from './ThemeSwitcher';
 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(() => {
@@ -40,7 +36,7 @@ export function Header() {
 					<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}
+						key={`${path}-${idx}`}
 					>
 						{path}
 					</Link>
@@ -53,7 +49,7 @@ export function Header() {
 			pathElements.flatMap((el, idx, array) => {
 				if (idx === 0) {
 					return (
-						<Fragment key={idx}>
+						<Fragment key={`${el.key}-${idx}`}>
 							<div className="mx-2">/</div>
 							{el}
 							<div className="mx-2">/</div>
@@ -63,14 +59,14 @@ export function Header() {
 
 				if (idx !== array.length - 1) {
 					return (
-						<Fragment key={idx}>
+						<Fragment key={`${el.key}-${idx}`}>
 							{el}
 							<div className="mx-2">/</div>
 						</Fragment>
 					);
 				}
 
-				return <Fragment key={idx}>{el}</Fragment>;
+				return <Fragment key={`${el.key}-${idx}`}>{el}</Fragment>;
 			}),
 		[pathElements],
 	);
@@ -111,13 +107,7 @@ export function Header() {
 						>
 							<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> */}
+						<ThemeSwitcher />
 					</div>
 				</div>
 			</div>