Add translations to components

Author: alinkedd

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

src/components/Layout/TopNav/TopNav.tsx

@@ -253,7 +253,7 @@ export default function TopNav({
             <div className="flex flex-row 3xl:flex-1 items-centers">
               <button
                 type="button"
-                aria-label="Menu"
+                aria-label="Меню"
                 onClick={() => setIsMenuOpen(!isMenuOpen)}
                 className={cn(
                   'active:scale-95 transition-transform flex lg:hidden w-12 h-12 rounded-full items-center justify-center hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link',
@@ -268,8 +268,8 @@ export default function TopNav({
                   <div className="uwu-visible flex items-center justify-center h-full">
                     <NextLink href="/">
                       <Image
-                        alt="logo by @sawaratsuki1004"
-                        title="logo by @sawaratsuki1004"
+                        alt="лого від @sawaratsuki1004"
+                        title="лого від @sawaratsuki1004"
                         className="h-8"
                         priority
                         width={63}
@@ -308,7 +308,7 @@ export default function TopNav({
                 )}
                 onClick={onOpenSearch}>
                 <IconSearch className="align-middle me-3 text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
-                Search
+                Пошук
                 <span className="hidden ms-auto sm:flex item-center me-1">
                   <Kbd data-platform="mac">⌘</Kbd>
                   <Kbd data-platform="win" wide>
@@ -321,25 +321,25 @@ export default function TopNav({
             <div className="text-base justify-center items-center gap-1.5 flex 3xl:flex-1 flex-row 3xl:justify-end">
               <div className="mx-2.5 gap-1.5 hidden lg:flex">
                 <NavItem isActive={section === 'learn'} url="/learn">
-                  Learn
+                  Вивчення
                 </NavItem>
                 <NavItem
                   isActive={section === 'reference'}
                   url="/reference/react">
-                  Reference
+                  Довідник
                 </NavItem>
                 <NavItem isActive={section === 'community'} url="/community">
-                  Community
+                  Спільнота
                 </NavItem>
                 <NavItem isActive={section === 'blog'} url="/blog">
-                  Blog
+                  Блог
                 </NavItem>
               </div>
               <div className="flex w-full md:hidden"></div>
               <div className="flex items-center -space-x-2.5 xs:space-x-0 ">
                 <div className="flex md:hidden">
                   <button
-                    aria-label="Search"
+                    aria-label="Пошук"
                     type="button"
                     className="flex items-center justify-center w-12 h-12 transition-transform rounded-full active:scale-95 md:hidden hover:bg-secondary-button hover:dark:bg-secondary-button-dark outline-link"
                     onClick={onOpenSearch}>
@@ -349,7 +349,7 @@ export default function TopNav({
                 <div className="flex dark:hidden">
                   <button
                     type="button"
-                    aria-label="Use Dark Mode"
+                    aria-label="Використовувати темний режим"
                     onClick={() => {
                       window.__setPreferredTheme('dark');
                     }}
@@ -360,7 +360,7 @@ export default function TopNav({
                 <div className="hidden dark:flex">
                   <button
                     type="button"
-                    aria-label="Use Light Mode"
+                    aria-label="Використовувати світлий режим"
                     onClick={() => {
                       window.__setPreferredTheme('light');
                     }}
@@ -371,7 +371,7 @@ export default function TopNav({
                 <div className="flex">
                   <Link
                     href="/community/translations"
-                    aria-label="Translations"
+                    aria-label="Переклади"
                     className="active:scale-95 transition-transform flex w-12 h-12 rounded-full items-center justify-center hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
                     {languageIcon}
                   </Link>
@@ -381,7 +381,7 @@ export default function TopNav({
                     href="https://github.com/facebook/react/releases"
                     target="_blank"
                     rel="noreferrer noopener"
-                    aria-label="Open on GitHub"
+                    aria-label="Відкрити на GitHub"
                     className="flex items-center justify-center w-12 h-12 transition-transform rounded-full active:scale-95 hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
                     {githubIcon}
                   </Link>
@@ -408,20 +408,20 @@ export default function TopNav({
                 <Suspense fallback={null}>
                   <div className="ps-3 xs:ps-5 xs:gap-0.5 xs:text-base overflow-x-auto flex flex-row lg:hidden text-base font-bold text-secondary dark:text-secondary-dark">
                     <NavItem isActive={section === 'learn'} url="/learn">
-                      Learn
+                      Вивчення
                     </NavItem>
                     <NavItem
                       isActive={section === 'reference'}
                       url="/reference/react">
-                      Reference
+                      Довідник
                     </NavItem>
                     <NavItem
                       isActive={section === 'community'}
                       url="/community">
-                      Community
+                      Спільнота
                     </NavItem>
                     <NavItem isActive={section === 'blog'} url="/blog">
-                      Blog
+                      Блог
                     </NavItem>
                   </div>
                   <div