Merge branch 'main' of https://github.com/reactjs/react.dev into sync-722b5464

react-translations-bot · react-translations-bot · commit d008dcf1d284 · 2023-09-04T03:05:38.000Z
diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
@@ -849,7 +849,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}
                 />
               ))}
diff --git a/src/components/Layout/Sidebar/SidebarButton.tsx b/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':
diff --git a/src/components/Layout/Sidebar/SidebarLink.tsx b/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>
diff --git a/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx b/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"
       />
diff --git a/src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx b/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"
       />
diff --git a/src/components/MDX/Sandpack/ResetButton.tsx b/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>
   );
 }
diff --git a/src/components/PageHeading.tsx b/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>
         )}
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
@@ -15,8 +15,14 @@ August 17 & 18, 2023. Salt Lake City, UT, USA
 
 [Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/)
 
+### React Native EU 2023 {/*react-native-eu-2023*/}
+September 7 & 8, 2023. Wrocław, Poland
+
+[Website](https://react-native.eu) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu)
+
+
 ### React India 2023 {/*react-india-2023*/}
-Oct 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day
+October 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day
 
 [Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
 
diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md
@@ -96,12 +96,10 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 
 ## India {/*india*/}
 * [Ahmedabad](https://www.meetup.com/react-ahmedabad/)
-* [Bangalore](https://www.meetup.com/ReactJS-Bangalore/)
-* [Bangalore](https://www.meetup.com/React-Native-Bangalore-Meetup)
-* [Chandigarh](https://www.meetup.com/Chandigarh-React-Developers/)
+* [Bangalore (React)](https://www.meetup.com/ReactJS-Bangalore/)
+* [Bangalore (React Native)](https://www.meetup.com/React-Native-Bangalore-Meetup)
 * [Chennai](https://www.meetup.com/React-Chennai/)
 * [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/)
-* [Jaipur](https://www.meetup.com/JaipurJS-Developer-Meetup/)
 * [Pune](https://www.meetup.com/ReactJS-and-Friends/)
 
 ## Indonesia {/*indonesia*/}
diff --git a/src/content/learn/typescript.md b/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.
diff --git a/src/content/reference/react/use-client.md b/src/content/reference/react/use-client.md
@@ -51,7 +51,9 @@ When a file marked `'use client'` is imported from a server component, [compatib
 ## Usage {/*usage*/}
 
 <Wip>
+This section is a work in progress. 
 
-This section is incomplete. See also the [Next.js documentation for Server Components](https://beta.nextjs.org/docs/rendering/server-and-client-components).
-
-</Wip>
+This API can be used in any framework that supports React Server Components. You may find additional documentation from them.
+* [Next.js documentation](https://nextjs.org/docs/getting-started/react-essentials)
+* More coming soon
+</Wip>
diff --git a/src/content/reference/react/use-server.md b/src/content/reference/react/use-server.md
@@ -49,7 +49,9 @@ Alternatively, add `'use server';` at the very top of a file to mark all exports
 ## Usage {/*usage*/}
 
 <Wip>
+This section is a work in progress. 
 
-This section is incomplete. See also the [Next.js documentation for Server Components](https://beta.nextjs.org/docs/rendering/server-and-client-components).
-
-</Wip>
+This API can be used in any framework that supports React Server Components. You may find additional documentation from them.
+* [Next.js documentation](https://nextjs.org/docs/getting-started/react-essentials)
+* More coming soon
+</Wip>

Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ export function SidebarButton({`
`31`	`31`	`})}>`
`32`	`32`	`<button`
`33`	`33`	`className={cn(`
`34`		`- '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',`
	`34`	`+ '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',`
`35`	`35`	`{`
`36`	`36`	`'p-2 text-base': level > 1,`
`37`	`37`	`'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':`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ export function ResetButton({onReset}: ResetButtonProps) {`
`15`	`15`	`onClick={onReset}`
`16`	`16`	`title="Reset Sandbox"`
`17`	`17`	`type="button">`
`18`		`- <IconRestart className="inline ms-1 me-1 relative" /> Reset`
	`18`	`+ <IconRestart className="inline mx-1 relative" /> Reset`
`19`	`19`	`</button>`
`20`	`20`	`);`
`21`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -460,4 +460,4 @@ We recommend the following resources:`
`460`	`460`
`461`	`461`	`- [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.`
`462`	`462`
`463`		`- - [TypeScript Community Discord](discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues.`
	`463`	`+ - [TypeScript Community Discord](https://discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues.`