Sync with react.dev @ ab18d2f0

TRANSLATION.md

@@ -111,7 +111,7 @@
 
 | Оригінал | Переклад |
 | ------------------ | ---------- |
-| API reference | API довідник |
+| API reference | Довідник API |
 | app | застосунок |
 | array | масив |
 | arrow function | стрілкова функція |
@@ -175,6 +175,7 @@
 | Note | Примітка |
 | online | онлайн |
 | online playground | онлайн пісочниця |
+| overview | огляд; вступ (тільки як вступна частина розділів та сторінок)|
 | package manager | менеджер пакетів |
 | package registry | реєстр пакетів |
 | paint | фарбування, перефарбування |

src/components/DocsFooter.tsx

@@ -80,7 +80,7 @@ function FooterLink({
       />
       <div className="flex flex-col overflow-hidden">
         <span className="text-sm font-bold tracking-wide no-underline uppercase text-secondary dark:text-secondary-dark group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">
-          {type}
+          {type === 'Previous' ? 'Попередня' : 'Наступна'}
         </span>
         <span className="text-lg break-words group-hover:underline">
           {title}

src/components/Layout/Feedback.tsx

@@ -67,11 +67,11 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
         {exit: isSubmitted}
       )}>
       <p className="w-full text-lg font-bold text-primary dark:text-primary-dark me-4">
-        {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}
+        {isSubmitted ? 'Дякуємо за відгук!' : 'Ця сторінка корисна?'}
       </p>
       {!isSubmitted && (
         <button
-          aria-label="Yes"
+          aria-label="Так"
           className="px-3 rounded-lg bg-secondary-button dark:bg-secondary-button-dark text-primary dark:text-primary-dark me-2"
           onClick={() => {
             setIsSubmitted(true);
@@ -83,7 +83,7 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
       )}
       {!isSubmitted && (
         <button
-          aria-label="No"
+          aria-label="Ні"
           className="px-3 rounded-lg bg-secondary-button dark:bg-secondary-button-dark text-primary dark:text-primary-dark"
           onClick={() => {
             setIsSubmitted(true);

src/components/Layout/Footer.tsx

@@ -292,7 +292,7 @@ export function Footer() {
               // @ts-ignore
               window.__setUwu(false);
             }}>
-            no uwu plz
+            без uwu, будь ласка
           </div>
           <div
             className="uwu-hidden text-xs cursor-pointer hover:text-link hover:dark:text-link-dark hover:underline"
@@ -303,7 +303,7 @@ export function Footer() {
             uwu?
           </div>
           <div className="uwu-visible text-xs">
-            Logo by
+            Лого від
             <ExternalLink
               className="ms-1"
               href="https://twitter.com/sawaratsuki1004">
@@ -313,72 +313,68 @@ export function Footer() {
         </div>
         <div className="flex flex-col">
           <FooterLink href="/learn" isHeader={true}>
-            Learn React
-          </FooterLink>
-          <FooterLink href="/learn/">Quick Start</FooterLink>
-          <FooterLink href="/learn/installation">Installation</FooterLink>
-          <FooterLink href="/learn/describing-the-ui">
-            Describing the UI
+            Вивчення React
           </FooterLink>
+          <FooterLink href="/learn/">Швидкий старт</FooterLink>
+          <FooterLink href="/learn/installation">Встановлення</FooterLink>
+          <FooterLink href="/learn/describing-the-ui">Написання UI</FooterLink>
           <FooterLink href="/learn/adding-interactivity">
-            Adding Interactivity
+            Додавання інтерактивності
           </FooterLink>
           <FooterLink href="/learn/managing-state">Managing State</FooterLink>
           <FooterLink href="/learn/escape-hatches">Escape Hatches</FooterLink>
         </div>
         <div className="flex flex-col">
           <FooterLink href="/reference/react" isHeader={true}>
-            API Reference
+            Довідник API
           </FooterLink>
-          <FooterLink href="/reference/react">React APIs</FooterLink>
-          <FooterLink href="/reference/react-dom">React DOM APIs</FooterLink>
+          <FooterLink href="/reference/react">React: API</FooterLink>
+          <FooterLink href="/reference/react-dom">React DOM: API</FooterLink>
         </div>
         <div className="md:col-start-2 xl:col-start-4 flex flex-col">
           <FooterLink href="/community" isHeader={true}>
-            Community
+            Спільнота
           </FooterLink>
           <FooterLink href="https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md">
-            Code of Conduct
+            Кодекс поведінки
           </FooterLink>
-          <FooterLink href="/community/team">Meet the Team</FooterLink>
+          <FooterLink href="/community/team">Команда React</FooterLink>
           <FooterLink href="/community/docs-contributors">
-            Docs Contributors
-          </FooterLink>
-          <FooterLink href="/community/acknowledgements">
-            Acknowledgements
+            Автори документації
           </FooterLink>
+          <FooterLink href="/community/acknowledgements">Подяки</FooterLink>
         </div>
         <div className="flex flex-col">
-          <FooterLink isHeader={true}>More</FooterLink>
-          <FooterLink href="/blog">Blog</FooterLink>
+          <FooterLink isHeader={true}>Більше</FooterLink>
+          <FooterLink href="/blog">Блог</FooterLink>
           <FooterLink href="https://reactnative.dev/">React Native</FooterLink>
           <FooterLink href="https://opensource.facebook.com/legal/privacy">
-            Privacy
+            Політика конфіденційності
           </FooterLink>
           <FooterLink href="https://opensource.fb.com/legal/terms/">
-            Terms
+            Умови використання
           </FooterLink>
           <div className="flex flex-row items-center mt-8 gap-x-2">
             <ExternalLink
-              aria-label="React on Facebook"
+              aria-label="React у Facebook"
               href="https://www.facebook.com/react"
               className={socialLinkClasses}>
               <IconFacebookCircle />
             </ExternalLink>
             <ExternalLink
-              aria-label="React on Twitter"
+              aria-label="React у Twitter"
               href="https://twitter.com/reactjs"
               className={socialLinkClasses}>
               <IconTwitter />
             </ExternalLink>
             <ExternalLink
-              aria-label="React on Bluesky"
+              aria-label="React у Bluesky"
               href="https://bsky.app/profile/react.dev"
               className={socialLinkClasses}>
               <IconBsky />
             </ExternalLink>
             <ExternalLink
-              aria-label="React on Github"
+              aria-label="React у Github"
               href="https://github.com/facebook/react"
               className={socialLinkClasses}>
               <IconGitHub />

src/components/Layout/HomeContent.js

@@ -119,8 +119,8 @@ export function HomeContent() {
         <div className="mx-5 mt-12 lg:mt-24 mb-20 lg:mb-32 flex flex-col justify-center">
           <div className="uwu-visible flex justify-center">
             <Image
-              alt="logo by @sawaratsuki1004"
-              title="logo by @sawaratsuki1004"
+              alt="лого від @sawaratsuki1004"
+              title="лого від @sawaratsuki1004"
               loading="eager"
               width={313}
               height={160}
@@ -145,15 +145,15 @@ export function HomeContent() {
               size="lg"
               className="w-full sm:w-auto justify-center"
               label="Learn React">
-              Learn React
+              Вивчення React
             </ButtonLink>
             <ButtonLink
               href={'/reference/react'}
               type="secondary"
               size="lg"
               className="w-full sm:w-auto justify-center"
               label="API Reference">
-              API Reference
+              Довідник API
             </ButtonLink>
           </div>
         </div>
@@ -435,15 +435,15 @@ export function HomeContent() {
                   </Para>
                   <div className="hidden lg:flex justify-start w-full">
                     <CTA color="gray" icon="news" href="/blog">
-                      Read more React news
+                      Більше новин про React
                     </CTA>
                   </div>
                 </div>
               </div>
               <div className="w-full lg:w-6/12">
                 <p className="uppercase tracking-wide font-bold text-sm text-tertiary dark:text-tertiary-dark flex flex-row gap-2 items-center mt-5 lg:-mt-2 w-full">
                   <IconChevron />
-                  Latest React News
+                  Останні новини про React
                 </p>
                 <div className="flex-col sm:flex-row flex-wrap flex gap-5 text-start my-5">
                   <div className="flex-1 min-w-[40%] text-start">
@@ -461,7 +461,7 @@ export function HomeContent() {
                 </div>
                 <div className="flex lg:hidden justify-start w-full">
                   <CTA color="gray" icon="news" href="/blog">
-                    Read more React news
+                    Більше новин про React
                   </CTA>
                 </div>
               </div>
@@ -519,7 +519,7 @@ export function HomeContent() {
               type="primary"
               size="lg"
               label="Take the Tutorial">
-              Get Started
+              Ознайомитися
             </ButtonLink>
           </div>
         </Section>
@@ -1104,7 +1104,7 @@ function SearchableVideoList({ videos }) {
             contentMarginTop="72px"
             height="30rem">
             <h1 className="mx-4 mb-1 font-bold text-3xl text-primary">
-              React Videos
+              Відео про React
             </h1>
             <p className="mx-4 mb-0 leading-snug text-secondary text-xl">
               A brief history of React
@@ -1321,7 +1321,7 @@ function BrowserChrome({children, hasPulse, hasRefresh, domain, path}) {
                 <div className="z-0 absolute shadow-[0_0_0_8px_rgba(0,0,0,0.5)] inset-0 rounded-full animation-pulse-shadow" />
               )}
               <button
-                aria-label="Reload"
+                aria-label="Перезавантажити"
                 onClick={handleRestart}
                 className={
                   'z-10 flex items-center p-1.5 rounded-full cursor-pointer justify-center' +
@@ -1512,7 +1512,7 @@ function ConferenceLayout({conf, children}) {
       data-hover="ConferenceLayout">
       <Cover background={conf.cover}>
         <select
-          aria-label="Event"
+          aria-label="Подія"
           defaultValue={slug}
           onChange={(e) => {
             startTransition(() => {
@@ -1685,7 +1685,7 @@ function LikeButton({video}) {
         'outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50',
         isLiked ? 'text-red-50' : 'text-tertiary'
       )}
-      aria-label={isLiked ? 'Unsave' : 'Save'}
+      aria-label={isLiked ? 'Видалити з улюбленого' : 'Додати в улюблене'}
       onClick={() => {
         const nextIsLiked = !isLiked;
         if (nextIsLiked) {

src/components/Layout/Page.tsx

@@ -132,7 +132,7 @@ export function Page({
           <link
             rel="alternate"
             type="application/rss+xml"
-            title="React Blog RSS Feed"
+            title="RSS-стрічка блогу React"
             href="/rss.xml"
           />
         </Head>

src/components/Layout/Sidebar/SidebarLink.tsx

@@ -77,14 +77,14 @@ export function SidebarLink({
         {title}{' '}
         {version === 'major' && (
           <span
-            title="- This feature is available in React 19 beta and the React canary channel"
+            title="- ця функція доступна в бета-версії React 19 та каналі canary-версій React"
             className={`text-xs px-1 ms-1 rounded bg-gray-10 dark:bg-gray-40 dark:bg-opacity-20 text-gray-40 dark:text-gray-40`}>
             React 19
           </span>
         )}
         {version === 'canary' && (
           <IconCanary
-            title=" - This feature is available in the latest Canary"
+            title=" - ця функція доступна в останній canary-версії"
             className="ms-1 text-gray-30 dark:text-gray-60 inline-block w-3.5 h-3.5 align-[-3px]"
           />
         )}

src/components/Layout/Toc.tsx

@@ -16,7 +16,7 @@ export function Toc({headings}: {headings: Toc}) {
     <nav role="navigation" className="pt-20 sticky top-0 end-0">
       {headings.length > 0 && (
         <h2 className="mb-3 lg:mb-3 uppercase tracking-wide font-bold text-sm text-secondary dark:text-secondary-dark px-4 w-full">
-          On this page
+          На цій сторінці
         </h2>
       )}
       <div

src/components/Layout/TopNav/BrandMenu.tsx

@@ -50,23 +50,23 @@ export default function BrandMenu({children}: {children: React.ReactNode}) {
           sideOffset={0}
           align="end">
           <ContextMenu.Label className="ps-4 pt-2 text-base text-tertiary dark:text-tertiary-dark">
-            Dark Mode
+            Темний режим
           </ContextMenu.Label>
           <DownloadMenuItem
             fileName="react_logo_dark.svg"
             href="/images/brand/logo_dark.svg">
             <span className="w-8">
               <IconDownload />
             </span>
-            <span>Logo SVG</span>
+            <span>Лого як SVG</span>
           </DownloadMenuItem>
           <DownloadMenuItem
             fileName="react_wordmark_dark.svg"
             href="/images/brand/wordmark_dark.svg">
             <span className="w-8">
               <IconDownload />
             </span>
-            <span>Wordmark SVG</span>
+            <span>Шрифтове лого як SVG</span>
           </DownloadMenuItem>
           <MenuItem
             onSelect={async () => {
@@ -75,26 +75,26 @@ export default function BrandMenu({children}: {children: React.ReactNode}) {
             <span className="w-8">
               <IconCopy />
             </span>
-            <span>Copy dark mode color</span>
+            <span>Скопіювати колір темного режиму</span>
           </MenuItem>
           <ContextMenu.Label className="ps-4 text-base text-tertiary dark:text-tertiary-dark">
-            Light Mode
+            Світлий режим
           </ContextMenu.Label>
           <DownloadMenuItem
             fileName="react_logo_light.svg"
             href="/images/brand/logo_light.svg">
             <span className="w-8">
               <IconDownload />
             </span>
-            <span>Logo SVG</span>
+            <span>Лого SVG</span>
           </DownloadMenuItem>
           <DownloadMenuItem
             fileName="react_wordmark_light.svg"
             href="/images/brand/wordmark_light.svg">
             <span className="w-8">
               <IconDownload />
             </span>
-            <span>Wordmark SVG</span>
+            <span>Шрифтове лого як SVG</span>
           </DownloadMenuItem>
           <MenuItem
             onSelect={async () => {
@@ -103,7 +103,7 @@ export default function BrandMenu({children}: {children: React.ReactNode}) {
             <span className="w-8">
               <IconCopy />
             </span>
-            <span>Copy light mode color</span>
+            <span>Скопіювати колір світлого режиму</span>
           </MenuItem>
           <div className="uwu-visible flex flex-col">
             <ContextMenu.Separator className="" />
@@ -118,13 +118,13 @@ export default function BrandMenu({children}: {children: React.ReactNode}) {
               <span className="w-8">
                 <IconClose />
               </span>
-              <span>Turn off</span>
+              <span>Вимкнути</span>
             </MenuItem>
             <DownloadMenuItem fileName="react_uwu_png" href="/images/uwu.png">
               <span className="w-8">
                 <IconDownload />
               </span>
-              <span>Logo PNG</span>
+              <span>Лого як PNG</span>
             </DownloadMenuItem>
 
             <ExternalLink
@@ -134,7 +134,7 @@ export default function BrandMenu({children}: {children: React.ReactNode}) {
                 <span className="w-8">
                   <IconNewPage />
                 </span>
-                <span>Logo by @sawaratsuki1004</span>
+                <span>Лого від @sawaratsuki1004</span>
               </MenuItem>
             </ExternalLink>
           </div>