[Beta] Change useState structure, add examples (#4276)

* [Beta] Change useState structure, add examples

* Simpler language

* Nix when not to use it

Author: gaearon

beta/src/components/Layout/MarkdownPage.tsx

@@ -50,9 +50,9 @@ export function MarkdownPage<
       }
       if (child.props.mdxType === 'Recipes') {
         return {
-          url: '#recipes',
+          url: '#' + (child.props.titleId ?? 'examples'),
           depth: 0,
-          text: 'Recipes',
+          text: child.props.titleText ?? 'Examples',
         };
       }
       if (child.props.mdxType === 'Recap') {

beta/src/components/MDX/Challenges/Challenges.tsx

@@ -14,6 +14,8 @@ import {IconArrowSmall} from '../../Icon/IconArrowSmall';
 interface ChallengesProps {
   children: React.ReactElement[];
   isRecipes?: boolean;
+  titleText?: string;
+  titleId?: string;
 }
 
 export interface ChallengeContents {
@@ -66,7 +68,12 @@ const parseChallengeContents = (
   return contents;
 };
 
-export function Challenges({children, isRecipes}: ChallengesProps) {
+export function Challenges({
+  children,
+  isRecipes,
+  titleText = isRecipes ? 'Try out some examples' : 'Try out some challenges',
+  titleId = isRecipes ? 'examples' : 'challenges',
+}: ChallengesProps) {
   const challenges = parseChallengeContents(children);
   const scrollAnchorRef = React.useRef<HTMLDivElement>(null);
 
@@ -112,12 +119,12 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
         )}>
         <div ref={scrollAnchorRef} className="py-2 px-5 sm:px-8 pb-0 md:pb-0">
           <H2
-            id={isRecipes ? 'recipes' : 'challenges'}
+            id={titleId}
             className={cn(
               'text-3xl mb-2 leading-10 relative',
               isRecipes ? 'text-purple-50 dark:text-purple-30' : 'text-link'
             )}>
-            {isRecipes ? 'Try out some recipes' : 'Try out some challenges'}
+            {titleText}
           </H2>
           {challenges.length > 1 && (
             <Navigation
@@ -132,8 +139,8 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
           <div key={activeChallenge}>
             <h3 className="text-xl text-primary dark:text-primary-dark mb-2">
               <div className="font-bold block md:inline">
-                {isRecipes ? 'Recipe' : 'Challenge'} {currentChallenge.order} of{' '}
-                {challenges.length}
+                {isRecipes ? 'Example' : 'Challenge'} {currentChallenge.order}{' '}
+                of {challenges.length}
                 <span className="text-primary dark:text-primary-dark">: </span>
               </div>
               {currentChallenge.name}
@@ -179,7 +186,7 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
                   setShowSolution(false);
                 }}
                 active>
-                Next {isRecipes ? 'Recipe' : 'Challenge'}
+                Next {isRecipes ? 'Example' : 'Challenge'}
                 <IconArrowSmall
                   displayDirection="right"
                   className="block ml-1.5"