Merge pull request #21 from reactjs/sync-842c24c9

Sync with react.dev @ 842c24c

Author: mirorauhala

src/components/Layout/HomeContent.js

@@ -860,7 +860,7 @@ function ExampleLayout({
               {overlayStyles.map((styles, i) => (
                 <div
                   key={i}
-                  className="inset-x-0 bg-blue-30/5 border-2 border-link dark:border-link-dark absolute rounded-lg"
+                  className="top-0 start-0 bg-blue-30/5 border-2 border-link dark:border-link-dark absolute rounded-lg"
                   style={styles}
                 />
               ))}

src/components/Layout/Sidebar/SidebarButton.tsx

@@ -31,7 +31,7 @@ export function SidebarButton({
       })}>
       <button
         className={cn(
-          'p-2 pe-2 ps-5 w-full rounded-s-lg text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
+          'p-2 pe-2 ps-5 w-full rounded-e-lg text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
           {
             'p-2 text-base': level > 1,
             'text-link bg-highlight dark:bg-highlight-dark text-base font-bold hover:bg-highlight dark:hover:bg-highlight-dark hover:text-link dark:hover:text-link-dark':

src/components/Layout/Sidebar/SidebarLink.tsx

@@ -58,7 +58,7 @@ export function SidebarLink({
       passHref
       aria-current={selected ? 'page' : undefined}
       className={cn(
-        'p-2 pe-2 w-full rounded-none lg:rounded-s-2xl text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
+        'p-2 pe-2 w-full rounded-none lg:rounded-e-2xl text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
         {
           'text-sm ps-6': level > 0,
           'ps-5': level < 2,
@@ -78,7 +78,7 @@ export function SidebarLink({
         {canary && (
           <IconCanary
             title="This feature is available in the latest Canary"
-            className="ml-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
+            className="ms-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
           />
         )}
       </div>

src/components/MDX/Challenges/Challenge.tsx

@@ -69,6 +69,7 @@ export function Challenge({
               className="me-2"
               onClick={toggleSolution}
               active={showSolution}>
+              {' '}
               <IconSolution className="me-1.5" />{' '}
               {showSolution ? 'Piilota ratkaisu' : 'Näytä ratkaisu'}
             </Button>

src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx

@@ -11,7 +11,7 @@ export const OpenInCodeSandboxButton = () => {
       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="Avaa CodeSandbox:ssa">
       <IconNewPage
-        className="inline ms-1 me-1 relative top-[1px]"
+        className="inline mx-1 relative top-[1px]"
         width="1em"
         height="1em"
       />

src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx

@@ -16,7 +16,7 @@ export const OpenInTypeScriptPlaygroundButton = (props: {content: string}) => {
       target="_blank"
       rel="noreferrer">
       <IconNewPage
-        className="inline ml-1 mr-1 relative top-[1px]"
+        className="inline mx-1 relative top-[1px]"
         width="1em"
         height="1em"
       />

src/components/PageHeading.tsx

@@ -35,13 +35,13 @@ function PageHeading({
           {canary && (
             <IconCanary
               title="This feature is available in the latest Canary"
-              className="ml-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
+              className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
             />
           )}
           {status ? <em>—{status}</em> : ''}
         </H1>
         {description && (
-          <p className="mt-4 mb-6 dark:text-primary-dark text-xl text-gray-90 leading-large">
+          <p className="mt-4 mb-6 dark:text-primary-dark text-xl text-primary leading-large">
             {description}
           </p>
         )}

src/content/learn/importing-and-exporting-components.md

@@ -53,7 +53,6 @@ img { margin: 0 10px 10px 0; height: 90px; }
 </Sandpack>
 
 Tässä esimerkissä nämä löytyvät **juurikomponenttitiedostosta** nimeltään `App.js`. Riippuen asennuksestasi, juurikomponenttisi saattaa olla toisessa tiedostossa. Jos käytät ohkelmistokehystä, jossa on tiedostopohjainen reititys, kuten Next.js, juurikomponenttisi on eri jokaiselle sivulle.
-
 ## Komponentin exporttaus ja importtaus {/*exporting-and-importing-a-component*/}
 
 Mitä jos haluat muuttaa laskeutumissivua tulevaisuudessa ja asettaa listan tiedekirjoista siihen? Tai siirtää kaikki profiilit jonnekin muualle? On järkevää siirtää `Gallery` ja `Profile` pois juurikomponentin tiedostosta. Tämä tekee niistä modulaarisempia ja uudelleenkäytettäviä muissa tiedostoissa. Voit siirtää komponentin kolmessa vaiheessa:

src/content/learn/typescript.md

@@ -460,4 +460,4 @@ We recommend the following resources:
 
  - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) is a community-maintained cheatsheet for using TypeScript with React, covering a lot of useful edge cases and providing more breadth than this document.
 
- - [TypeScript Community Discord](discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues.
+ - [TypeScript Community Discord](https://discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues.