Translation for "You Might Not Need an Effect"

src/components/MDX/Challenges/Challenge.tsx

@@ -50,7 +50,7 @@ export function Challenge({
           className="text-xl text-primary dark:text-primary-dark mb-2 mt-0 font-medium"
           id={currentChallenge.id}>
           <div className="font-bold block md:inline">
-            {isRecipes ? 'Example' : 'Challenge'} {currentChallenge.order} of{' '}
+            {isRecipes ? 'Пример' : 'Испытание'} {currentChallenge.order} из{' '}
             {totalChallenges}
             <span className="text-primary dark:text-primary-dark">: </span>
           </div>
@@ -61,16 +61,17 @@ export function Challenge({
       <div className="flex justify-between items-center mt-4">
         {currentChallenge.hint ? (
           <div>
-            <Button className="me-2" onClick={toggleHint} active={showHint}>
-              <IconHint className="me-1.5" />{' '}
-              {showHint ? 'Hide hint' : 'Show hint'}
+
+            <Button className="mr-2" onClick={toggleHint} active={showHint}>
+              <IconHint className="mr-1.5" />{' '}
+              {showHint ? 'Скрыть подсказку' : 'Показать подсказку'}
             </Button>
             <Button
               className="me-2"
               onClick={toggleSolution}
               active={showSolution}>
-              <IconSolution className="me-1.5" />{' '}
-              {showSolution ? 'Hide solution' : 'Show solution'}
+              <IconSolution className="mr-1.5" />{' '}
+              {showSolution ? 'Скрыть решение' : 'Показать решение'}
             </Button>
           </div>
         ) : (
@@ -79,12 +80,12 @@ export function Challenge({
               className="me-2"
               onClick={toggleSolution}
               active={showSolution}>
-              <IconSolution className="me-1.5" />{' '}
-              {showSolution ? 'Hide solution' : 'Show solution'}
+
+              <IconSolution className="mr-1.5" />{' '}
+              {showSolution ? 'Скрыть решение' : 'Показать решение'}
             </Button>
           )
         )}
-
         {hasNextChallenge && (
           <Button
             className={cn(
@@ -94,22 +95,22 @@ export function Challenge({
             )}
             onClick={handleClickNextChallenge}
             active>
-            Next {isRecipes ? 'Example' : 'Challenge'}
-            <IconArrowSmall displayDirection="end" className="block ms-1.5" />
+            {isRecipes ? 'Следующий' : 'Следующее'}{' '}
+            {isRecipes ? 'Пример' : 'Испытание'}
+            <IconArrowSmall displayDirection="right" className="block ml-1.5" />
           </Button>
         )}
       </div>
       {showHint && currentChallenge.hint}
-
       {showSolution && (
         <div className="mt-6">
           <h3 className="text-2xl font-bold text-primary dark:text-primary-dark">
-            Solution
+            Решение
           </h3>
           {currentChallenge.solution}
           <div className="flex justify-between items-center mt-4">
             <Button onClick={() => setShowSolution(false)}>
-              Close solution
+              Скрыть решение
             </Button>
             {hasNextChallenge && (
               <Button
@@ -118,7 +119,7 @@ export function Challenge({
                 )}
                 onClick={handleClickNextChallenge}
                 active>
-                Next Challenge
+                Следующее Испытание
                 <IconArrowSmall
                   displayDirection="end"
                   className="block ms-1.5"

src/components/MDX/Challenges/Challenges.tsx

@@ -78,7 +78,9 @@ export function Challenges({
   children,
   isRecipes,
   noTitle,
-  titleText = isRecipes ? 'Try out some examples' : 'Try out some challenges',
+  titleText = isRecipes
+    ? 'Попробуйте несколько примеров'
+    : 'Выполните несколько задач',
   titleId = isRecipes ? 'examples' : 'challenges',
 }: ChallengesProps) {
   const challenges = parseChallengeContents(children);

src/components/MDX/ExpandableExample.tsx

@@ -70,8 +70,8 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
           })}>
           {isDeepDive && (
             <>
-              <IconDeepDive className="inline me-2 dark:text-purple-30 text-purple-40" />
-              Deep Dive
+              <IconDeepDive className="inline mr-2 dark:text-purple-30 text-purple-40" />
+              Глубокое Погружение
             </>
           )}
           {isExample && (
@@ -101,7 +101,7 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
           <span className="me-1">
             <IconChevron displayDirection={isExpanded ? 'up' : 'down'} />
           </span>
-          {isExpanded ? 'Hide Details' : 'Show Details'}
+          {isExpanded ? 'Скрыть подробности' : 'Показать подробности'}
         </Button>
       </summary>
       <div

src/components/MDX/MDXComponents.tsx

@@ -197,7 +197,9 @@ function YouWillLearn({
   children: any;
   isChapter?: boolean;
 }) {
+
   let title = isChapter ? 'В этой главе' : 'Вы узнаете';
+
   return <SimpleCallout title={title}>{children}</SimpleCallout>;
 }
 

src/components/MDX/Recap.tsx

@@ -13,7 +13,7 @@ function Recap({children}: RecapProps) {
   return (
     <section>
       <H2 isPageAnchor id="recap">
-        Recap
+        Подведение итогов
       </H2>
       {children}
     </section>

src/components/MDX/Sandpack/CustomPreset.tsx

@@ -58,7 +58,7 @@ const SandboxShell = memo(function SandboxShell({
   return (
     <>
       <div
-        className="shadow-lg dark:shadow-lg-dark rounded-lg"
+        className="rounded-lg shadow-lg dark:shadow-lg-dark"
         ref={containerRef}
         style={{
           contain: 'content',
@@ -78,7 +78,7 @@ const SandboxShell = memo(function SandboxShell({
           {(isExpandable || isExpanded) && (
             <button
               translate="yes"
-              className="sandpack-expand flex text-base justify-between dark:border-card-dark bg-wash dark:bg-card-dark items-center z-10 p-1 w-full order-2 xl:order-last border-b-1 relative top-0"
+              className="relative top-0 z-10 flex items-center justify-between order-2 w-full p-1 text-base sandpack-expand dark:border-card-dark bg-wash dark:bg-card-dark xl:order-last border-b-1"
               onClick={() => {
                 const nextIsExpanded = !isExpanded;
                 flushSync(() => {
@@ -102,7 +102,7 @@ const SandboxShell = memo(function SandboxShell({
                   className="inline me-1.5 text-xl"
                   displayDirection={isExpanded ? 'up' : 'down'}
                 />
-                {isExpanded ? 'Show less' : 'Show more'}
+                {isExpanded ? 'Скрыть' : 'Раскрыть'}
               </span>
             </button>
           )}

src/components/MDX/Sandpack/DownloadButton.tsx

@@ -102,7 +102,7 @@ ${css}
       onClick={downloadHTML}
       title="Download Sandbox"
       type="button">
-      <IconDownload className="inline me-1" /> Download
+      <IconDownload className="inline mr-1" /> Загрузить
     </button>
   );
 }

src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx

@@ -15,7 +15,7 @@ export const OpenInCodeSandboxButton = () => {
         width="1em"
         height="1em"
       />
-      <span className="hidden md:block">Fork</span>
+      <span className="hidden md:block">Отрыть в песочнице</span>
     </UnstyledOpenInCodeSandboxButton>
   );
 };

src/components/MDX/Sandpack/ResetButton.tsx

@@ -15,7 +15,7 @@ export function ResetButton({onReset}: ResetButtonProps) {
       onClick={onReset}
       title="Reset Sandbox"
       type="button">
-      <IconRestart className="inline mx-1 relative" /> Reset
+      <IconRestart className="relative inline ml-1 mr-1" /> Сбросить
     </button>
   );
 }