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

Sync with react.dev @ 842c24c

src/components/Layout/HomeContent.js

@@ -382,20 +382,13 @@ export function HomeContent() {
                           </Link>{' '}
                           және{' '}
                           <Link href="https://github.com/expo/expo">Expo</Link>{' '}
-<<<<<<< HEAD
                           қолданып Android, IOS және т.б. бағдарламаларын
                           жасауға мүмкіндік береді. Олар нативті болып көрінеді
                           және сезінеді, өйткені олардың пайдаланушы
                           интерфейстері <i>шынымен</i> нативті. Бұл веб көрініс
                           емес — сіздің React компоненттеріңіз платформамен
                           қамтамасыз етілген нақты Android және iOS көрініс.
-=======
-                          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.
->>>>>>> 819518cfe32dd2db3b765410247c30feea713c77
+
                         </p>
                       </div>
                     </div>
@@ -421,13 +414,9 @@ 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>Болашақ дайын болғанда жаңартыңыз</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>
->>>>>>> 819518cfe32dd2db3b765410247c30feea713c77
+                <Header>Болашақ дайын болғанда жаңартыңыз</Header>
+
                 <Para>
                   React болашақ өзгерістерге мұқият қарайды. Әрбір React-қа
                   жасаған коммит миллиардтан астам пайдаланушысы бар бизнес үшін
@@ -515,13 +504,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
-              React қауымдастығынызға <br className="" />
+              React қауымдастығынызға <br className="hidden lg:inline" />
               қош келдіңіз
-=======
-              Welcome to the <br className="hidden lg:inline" />
-              React community
->>>>>>> 819518cfe32dd2db3b765410247c30feea713c77
             </Header>
             <ButtonLink
               href={'/learn'}
@@ -878,7 +862,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/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="Open in CodeSandbox">
       <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/MDX/Sandpack/ResetButton.tsx

@@ -15,7 +15,7 @@ export function ResetButton({onReset}: ResetButtonProps) {
       onClick={onReset}
       title="Reset Sandbox"
       type="button">
-      <IconRestart className="inline ms-1 me-1 relative" /> Reset
+      <IconRestart className="inline mx-1 relative" /> Reset
     </button>
   );
 }

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/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.