Merge branch 'main' into sync-842c24c9

Author: mirorauhala

src/components/Layout/Feedback.tsx

@@ -2,8 +2,8 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {useState} from 'react';
 import {useRouter} from 'next/router';
+import {useState} from 'react';
 import {ga} from '../../utils/analytics';
 
 export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) {
@@ -62,13 +62,8 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
   const [isSubmitted, setIsSubmitted] = useState(false);
   return (
     <div className="max-w-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex">
-<<<<<<< HEAD
-      <p className="w-full font-bold text-primary dark:text-primary-dark text-lg mr-4">
-        {isSubmitted ? 'Kiitos palautteestasi!' : 'Onko tämä sivu hyödyllinen?'}
-=======
       <p className="w-full font-bold text-primary dark:text-primary-dark text-lg me-4">
-        {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}
->>>>>>> 842c24c9aefaa60b7ae9b46b002bd1b3cf4d31f3
+        {isSubmitted ? 'Kiitos palautteestasi!' : 'Onko tämä sivu hyödyllinen?'}
       </p>
       {!isSubmitted && (
         <button

src/components/Layout/HomeContent.js

@@ -2,30 +2,30 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
+import cn from 'classnames';
+import NextLink from 'next/link';
 import {
+  Suspense,
   createContext,
   memo,
-  useState,
   useContext,
-  useId,
-  Suspense,
   useEffect,
+  useId,
   useRef,
+  useState,
   useTransition,
 } from 'react';
-import cn from 'classnames';
-import NextLink from 'next/link';
 
-import ButtonLink from '../ButtonLink';
-import {IconRestart} from '../Icon/IconRestart';
-import BlogCard from 'components/MDX/BlogCard';
+import {ExternalLink} from 'components/ExternalLink';
 import {IconChevron} from 'components/Icon/IconChevron';
 import {IconSearch} from 'components/Icon/IconSearch';
 import {Logo} from 'components/Logo';
-import Link from 'components/MDX/Link';
+import BlogCard from 'components/MDX/BlogCard';
 import CodeBlock from 'components/MDX/CodeBlock';
-import {ExternalLink} from 'components/ExternalLink';
+import Link from 'components/MDX/Link';
 import sidebarBlog from '../../sidebarBlog.json';
+import ButtonLink from '../ButtonLink';
+import {IconRestart} from '../Icon/IconRestart';
 
 function Section({children, background = null}) {
   return (
@@ -383,20 +383,12 @@ export function HomeContent() {
                           </Link>{' '}
                           ja{' '}
                           <Link href="https://github.com/expo/expo">Expo</Link>{' '}
-<<<<<<< HEAD
                           antavat sinun rakentaa sovelluksia Reactilla
-                          Androidille, iOS:lle, ja enemmän. Ne näyttävät ja
+                          Androidille, iOS:lle, ja muille. Ne näyttävät ja
                           tuntuvat aidolta, koska niiden UI:t <i>ovat</i> täysin
-                          natiiveja. Ne eivät ole web view elementtejä,
-                          komponenttisi renderöi oikeita Android ja iOS ruutuja,
-                          jotka alusta tarjoaa.
-=======
-                          let you build apps in React for Android, iOS, and
-                          more. They look and feel native because their UIs{' '}
-                          <i>are</i> truly native. It’s not a web view—your
-                          React components render real Android and iOS views
-                          provided by the platform.
->>>>>>> 842c24c9aefaa60b7ae9b46b002bd1b3cf4d31f3
+                          natiiveja. Ne eivät ole web-view elementtejä,
+                          komponenttisi renderöi oikeita alustan tarjoamia
+                          Android ja iOS ruutuja.
                         </p>
                       </div>
                     </div>
@@ -424,13 +416,8 @@ export function HomeContent() {
         <Section background="right-card">
           <div className="max-w-7xl mx-auto flex flex-col lg:flex-row px-5">
             <div className="max-w-3xl lg:max-w-7xl gap-5 flex flex-col lg:flex-row lg:px-5">
-<<<<<<< HEAD
-              <div className="w-full lg:w-6/12 max-w-3xl flex flex-col items-start justify-start lg:pl-5 lg:pr-10">
-                <Header>Päivitä kun tulevaisuus on valmis</Header>
-=======
               <div className="w-full lg:w-6/12 max-w-3xl flex flex-col items-start justify-start lg:ps-5 lg:pe-10">
-                <Header>Upgrade when the future is ready</Header>
->>>>>>> 842c24c9aefaa60b7ae9b46b002bd1b3cf4d31f3
+                <Header>Päivitä kun tulevaisuus on valmis</Header>
                 <Para>
                   React lähestyy muutoksia huolella. Jokainen React commit
                   testataan bisneskriittisillä pinnoilla, yli miljardin
@@ -515,13 +502,8 @@ export function HomeContent() {
           <div className="mt-20 px-5 lg:px-0 mb-6 max-w-4xl text-center text-opacity-80">
             <Logo className="text-link dark:text-link-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
             <Header>
-<<<<<<< HEAD
-              Tervetuloa React <br className="" />
+              Tervetuloa React <br className="hidden lg:inline" />
               yhteisöön
-=======
-              Welcome to the <br className="hidden lg:inline" />
-              React community
->>>>>>> 842c24c9aefaa60b7ae9b46b002bd1b3cf4d31f3
             </Header>
             <ButtonLink
               href={'/learn'}
@@ -1499,13 +1481,8 @@ function SearchInput({value, onChange}) {
         <input
           type="text"
           id={id}
-<<<<<<< HEAD
-          className="flex pl-11 py-4 h-10 w-full bg-secondary-button outline-none betterhover:hover:bg-opacity-80 pointer items-center text-left text-primary rounded-full align-middle text-base"
-          placeholder="Haku"
-=======
           className="flex ps-11 py-4 h-10 w-full text-start bg-secondary-button outline-none betterhover:hover:bg-opacity-80 pointer items-center text-primary rounded-full align-middle text-base"
-          placeholder="Search"
->>>>>>> 842c24c9aefaa60b7ae9b46b002bd1b3cf4d31f3
+          placeholder="Haku"
           value={value}
           onChange={(e) => onChange(e.target.value)}
         />

src/components/MDX/Challenges/Challenge.tsx

@@ -2,14 +2,14 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {useState} from 'react';
 import cn from 'classnames';
 import {Button} from 'components/Button';
-import {ChallengeContents} from './Challenges';
+import {useState} from 'react';
+import {IconArrowSmall} from '../../Icon/IconArrowSmall';
 import {IconHint} from '../../Icon/IconHint';
 import {IconSolution} from '../../Icon/IconSolution';
-import {IconArrowSmall} from '../../Icon/IconArrowSmall';
 import {H4} from '../Heading';
+import {ChallengeContents} from './Challenges';
 
 interface ChallengeProps {
   isRecipes?: boolean;
@@ -61,27 +61,17 @@ export function Challenge({
       <div className="flex justify-between items-center mt-4">
         {currentChallenge.hint ? (
           <div>
-<<<<<<< HEAD
-            <Button className="mr-2" onClick={toggleHint} active={showHint}>
-              <IconHint className="mr-1.5" />{' '}
-              {showHint ? 'Piilota vihje' : 'Näytä vihje'}
-=======
             <Button className="me-2" onClick={toggleHint} active={showHint}>
               <IconHint className="me-1.5" />{' '}
-              {showHint ? 'Hide hint' : 'Show hint'}
->>>>>>> 842c24c9aefaa60b7ae9b46b002bd1b3cf4d31f3
+              {showHint ? 'Piilota vihje' : 'Näytä vihje'}
             </Button>
             <Button
               className="me-2"
               onClick={toggleSolution}
               active={showSolution}>
-<<<<<<< HEAD
-              <IconSolution className="mr-1.5" />{' '}
-              {showSolution ? 'Piilota ratkaisu' : 'Näytä ratkaisu'}
-=======
+              {' '}
               <IconSolution className="me-1.5" />{' '}
-              {showSolution ? 'Hide solution' : 'Show solution'}
->>>>>>> 842c24c9aefaa60b7ae9b46b002bd1b3cf4d31f3
+              {showSolution ? 'Piilota ratkaisu' : 'Näytä ratkaisu'}
             </Button>
           </div>
         ) : (
@@ -90,13 +80,8 @@ export function Challenge({
               className="me-2"
               onClick={toggleSolution}
               active={showSolution}>
-<<<<<<< HEAD
-              <IconSolution className="mr-1.5" />{' '}
-              {showSolution ? 'Piilota ratkaisu' : 'Näytä ratkaisu'}
-=======
               <IconSolution className="me-1.5" />{' '}
-              {showSolution ? 'Hide solution' : 'Show solution'}
->>>>>>> 842c24c9aefaa60b7ae9b46b002bd1b3cf4d31f3
+              {showSolution ? 'Piilota ratkaisu' : 'Näytä ratkaisu'}
             </Button>
           )
         )}
@@ -110,13 +95,8 @@ export function Challenge({
             )}
             onClick={handleClickNextChallenge}
             active>
-<<<<<<< HEAD
             Seuraava {isRecipes ? 'esimerkki' : 'haaste'}
-            <IconArrowSmall displayDirection="right" className="block ml-1.5" />
-=======
-            Next {isRecipes ? 'Example' : 'Challenge'}
             <IconArrowSmall displayDirection="end" className="block ms-1.5" />
->>>>>>> 842c24c9aefaa60b7ae9b46b002bd1b3cf4d31f3
           </Button>
         )}
       </div>

src/components/MDX/ExpandableExample.tsx

@@ -2,15 +2,15 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import * as React from 'react';
 import cn from 'classnames';
+import {useRouter} from 'next/router';
+import * as React from 'react';
+import {useEffect, useRef, useState} from 'react';
+import {Button} from '../Button';
 import {IconChevron} from '../Icon/IconChevron';
-import {IconDeepDive} from '../Icon/IconDeepDive';
 import {IconCodeBlock} from '../Icon/IconCodeBlock';
-import {Button} from '../Button';
+import {IconDeepDive} from '../Icon/IconDeepDive';
 import {H4} from './Heading';
-import {useRouter} from 'next/router';
-import {useEffect, useRef, useState} from 'react';
 
 interface ExpandableExampleProps {
   children: React.ReactNode;
@@ -70,24 +70,14 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
           })}>
           {isDeepDive && (
             <>
-<<<<<<< HEAD
-              <IconDeepDive className="inline mr-2 dark:text-purple-30 text-purple-40" />
-              Syväsukellus
-=======
               <IconDeepDive className="inline me-2 dark:text-purple-30 text-purple-40" />
-              Deep Dive
->>>>>>> 842c24c9aefaa60b7ae9b46b002bd1b3cf4d31f3
+              Syväsukellus
             </>
           )}
           {isExample && (
             <>
-<<<<<<< HEAD
-              <IconCodeBlock className="inline mr-2 dark:text-yellow-30 text-yellow-50" />
-              Esimerkki
-=======
               <IconCodeBlock className="inline me-2 dark:text-yellow-30 text-yellow-50" />
-              Example
->>>>>>> 842c24c9aefaa60b7ae9b46b002bd1b3cf4d31f3
+              Esimerkki
             </>
           )}
         </h5>

src/components/MDX/MDXComponents.tsx

@@ -2,34 +2,34 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {Children, useContext, useMemo} from 'react';
-import * as React from 'react';
 import cn from 'classnames';
+import * as React from 'react';
+import {Children, useContext, useMemo} from 'react';
 
+import ButtonLink from 'components/ButtonLink';
+import {IconNavArrow} from '../Icon/IconNavArrow';
+import BlogCard from './BlogCard';
+import {Challenges, Hint, Solution} from './Challenges';
 import CodeBlock from './CodeBlock';
 import {CodeDiagram} from './CodeDiagram';
 import ConsoleBlock from './ConsoleBlock';
+import Diagram from './Diagram';
+import DiagramGroup from './DiagramGroup';
 import ExpandableCallout from './ExpandableCallout';
 import ExpandableExample from './ExpandableExample';
 import {H1, H2, H3, H4} from './Heading';
 import InlineCode from './InlineCode';
 import Intro from './Intro';
-import BlogCard from './BlogCard';
 import Link from './Link';
 import {PackageImport} from './PackageImport';
 import Recap from './Recap';
 import Sandpack from './Sandpack';
-import Diagram from './Diagram';
-import DiagramGroup from './DiagramGroup';
 import SimpleCallout from './SimpleCallout';
+import {TeamMember} from './TeamMember';
 import TerminalBlock from './TerminalBlock';
-import YouWillLearnCard from './YouWillLearnCard';
-import {Challenges, Hint, Solution} from './Challenges';
-import {IconNavArrow} from '../Icon/IconNavArrow';
-import ButtonLink from 'components/ButtonLink';
-import {TocContext} from './TocContext';
 import type {Toc, TocItem} from './TocContext';
-import {TeamMember} from './TeamMember';
+import {TocContext} from './TocContext';
+import YouWillLearnCard from './YouWillLearnCard';
 
 function CodeStep({children, step}: {children: any; step: number}) {
   return (
@@ -126,13 +126,8 @@ function LearnMore({
               label="Lue lisää"
               href={path}
               type="primary">
-<<<<<<< HEAD
               Lue lisää
-              <IconNavArrow displayDirection="right" className="inline ml-1" />
-=======
-              Read More
               <IconNavArrow displayDirection="end" className="inline ms-1" />
->>>>>>> 842c24c9aefaa60b7ae9b46b002bd1b3cf4d31f3
             </ButtonLink>
           ) : null}
         </div>

src/components/MDX/Sandpack/DownloadButton.tsx

@@ -2,8 +2,8 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {useSyncExternalStore} from 'react';
 import {useSandpack} from '@codesandbox/sandpack-react';
+import {useSyncExternalStore} from 'react';
 import {IconDownload} from '../../Icon/IconDownload';
 export interface DownloadButtonProps {}
 
@@ -103,11 +103,7 @@ ${css}
       onClick={downloadHTML}
       title="Lataa hiekkalaatikko"
       type="button">
-<<<<<<< HEAD
-      <IconDownload className="inline mr-1" /> Lataa
-=======
-      <IconDownload className="inline me-1" /> Download
->>>>>>> 842c24c9aefaa60b7ae9b46b002bd1b3cf4d31f3
+      <IconDownload className="inline me-1" /> Lataa
     </button>
   );
 }

src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx

@@ -8,13 +8,8 @@ import {IconNewPage} from '../../Icon/IconNewPage';
 export const OpenInCodeSandboxButton = () => {
   return (
     <UnstyledOpenInCodeSandboxButton
-<<<<<<< HEAD
-      className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1 ml-2 md:ml-1"
-      title="Avaa CodeSandbox:ssa">
-=======
       className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1 ms-2 md:ms-1"
-      title="Open in CodeSandbox">
->>>>>>> 842c24c9aefaa60b7ae9b46b002bd1b3cf4d31f3
+      title="Avaa CodeSandbox:ssa">
       <IconNewPage
         className="inline mx-1 relative top-[1px]"
         width="1em"

src/components/MDX/Sandpack/ResetButton.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import * as React from 'react';
 import {IconRestart} from '../../Icon/IconRestart';
 export interface ResetButtonProps {
   onReset: () => void;
@@ -15,11 +14,7 @@ export function ResetButton({onReset}: ResetButtonProps) {
       onClick={onReset}
       title="Palauta hiekkalaatikko"
       type="button">
-<<<<<<< HEAD
-      <IconRestart className="inline ml-1 mr-1 relative" /> Palauta
-=======
-      <IconRestart className="inline mx-1 relative" /> Reset
->>>>>>> 842c24c9aefaa60b7ae9b46b002bd1b3cf4d31f3
+      <IconRestart className="inline ms-1 me-1 relative" /> Palauta
     </button>
   );
 }