Mark necessary MDX components as Client Components

Author: SukkaW

src/components/Layout/HomeContent.js

@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *

src/components/MDX/Challenges/Challenges.tsx

@@ -16,7 +16,7 @@ import {H2} from 'components/MDX/Heading';
 import {H4} from 'components/MDX/Heading';
 import {Challenge} from './Challenge';
 import {Navigation} from './Navigation';
-import {useRouter} from 'next/router';
+import {useRouter} from 'next/compat/router';
 
 interface ChallengesProps {
   children: React.ReactElement[];

src/components/MDX/Challenges/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *

src/components/MDX/ErrorDecoder.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -6,7 +8,7 @@
  */
 
 import {useEffect, useState} from 'react';
-import {useErrorDecoderParams} from '../ErrorDecoderContext';
+import {useErrorDecoderParams} from '../_/ErrorDecoderContext';
 import cn from 'classnames';
 
 function replaceArgs(

src/components/MDX/Illustration/AuthorCredit.tsx

@@ -0,0 +1,28 @@
+export function AuthorCredit({
+  author = 'Rachel Lee Nabors',
+  authorLink = 'https://nearestnabors.com/',
+}: {
+  author: string;
+  authorLink: string;
+}) {
+  return (
+    <div className="sr-only group-hover:not-sr-only group-focus-within:not-sr-only hover:sr-only">
+      <p className="bg-card dark:bg-card-dark text-center text-sm text-secondary dark:text-secondary-dark leading-tight p-2 rounded-lg absolute start-1/2 -top-4 -translate-x-1/2 -translate-y-full group-hover:flex group-hover:opacity-100 after:content-[''] after:absolute after:start-1/2 after:top-[95%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-b-transparent after:border-t-card after:dark:border-t-card-dark opacity-0 transition-opacity duration-300">
+        <cite>
+          Illustrated by{' '}
+          {authorLink ? (
+            <a
+              target="_blank"
+              rel="noreferrer"
+              className="text-link dark:text-link-dark"
+              href={authorLink}>
+              {author}
+            </a>
+          ) : (
+            author
+          )}
+        </cite>
+      </p>
+    </div>
+  );
+}

src/components/MDX/Illustration/Illustration.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import {useContext} from 'react';
+import {IllustrationContext} from './IllustrationContext';
+import {AuthorCredit} from './AuthorCredit';
+
+export function Illustration({
+  caption,
+  src,
+  alt,
+  author,
+  authorLink,
+}: {
+  caption: string;
+  src: string;
+  alt: string;
+  author: string;
+  authorLink: string;
+}) {
+  const {isInBlock} = useContext(IllustrationContext);
+
+  return (
+    <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
+      <figure className="my-8 flex justify-center">
+        <img
+          src={src}
+          alt={alt}
+          style={{maxHeight: 300}}
+          className="rounded-lg"
+        />
+        {caption ? (
+          <figcaption className="text-center leading-tight mt-4">
+            {caption}
+          </figcaption>
+        ) : null}
+      </figure>
+      {!isInBlock && <AuthorCredit author={author} authorLink={authorLink} />}
+    </div>
+  );
+}

src/components/MDX/Illustration/IllustrationBlock.tsx

@@ -0,0 +1,56 @@
+import {Children} from 'react';
+import {IllustrationContext} from './IllustrationContext';
+import {AuthorCredit} from './AuthorCredit';
+
+const isInBlockTrue = {isInBlock: true};
+
+export function IllustrationBlock({
+  sequential,
+  author,
+  authorLink,
+  children,
+}: {
+  author: string;
+  authorLink: string;
+  sequential: boolean;
+  children: any;
+}) {
+  const imageInfos = Children.toArray(children).map(
+    (child: any) => child.props
+  );
+  const images = imageInfos.map((info, index) => (
+    <figure key={index}>
+      <div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
+        <img
+          className="text-primary"
+          src={info.src}
+          alt={info.alt}
+          height={info.height}
+        />
+      </div>
+      {info.caption ? (
+        <figcaption className="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">
+          {info.caption}
+        </figcaption>
+      ) : null}
+    </figure>
+  ));
+  return (
+    <IllustrationContext value={isInBlockTrue}>
+      <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
+        {sequential ? (
+          <ol className="mdx-illustration-block flex">
+            {images.map((x: any, i: number) => (
+              <li className="flex-1" key={i}>
+                {x}
+              </li>
+            ))}
+          </ol>
+        ) : (
+          <div className="mdx-illustration-block">{images}</div>
+        )}
+        <AuthorCredit author={author} authorLink={authorLink} />
+      </div>
+    </IllustrationContext>
+  );
+}

src/components/MDX/Illustration/IllustrationContext.ts

@@ -0,0 +1,9 @@
+'use client';
+
+import {createContext} from 'react';
+
+export const IllustrationContext = createContext<{
+  isInBlock?: boolean;
+}>({
+  isInBlock: false,
+});

src/components/MDX/LanguageList.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import {useContext} from 'react';
+import {LanguagesContext} from './LanguagesContext';
+import {finishedTranslations} from 'utils/finishedTranslations';
+import Link from 'next/link';
+import {LI, UL} from './List';
+
+type TranslationProgress = 'complete' | 'in-progress';
+
+export function LanguageList({progress}: {progress: TranslationProgress}) {
+  const allLanguages = useContext(LanguagesContext) ?? [];
+  const languages = allLanguages
+    .filter(
+      ({code}) =>
+        code !== 'en' &&
+        (progress === 'complete'
+          ? finishedTranslations.includes(code)
+          : !finishedTranslations.includes(code))
+    )
+    .sort((a, b) => a.enName.localeCompare(b.enName));
+  return (
+    <UL>
+      {languages.map(({code, name, enName}) => {
+        return (
+          <LI key={code}>
+            <Link href={`https://${code}.react.dev/`}>
+              {enName} ({name})
+            </Link>{' '}
+            &mdash;{' '}
+            <Link href={`https://github.com/reactjs/${code}.react.dev`}>
+              Contribute
+            </Link>
+          </LI>
+        );
+      })}
+    </UL>
+  );
+}

src/components/MDX/LanguagesContext.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *