Resolve conflicts

Author: jakubdrozdek

src/components/DocsFooter.tsx

@@ -78,15 +78,9 @@ function FooterLink({
         className="inline text-tertiary dark:text-tertiary-dark group-focus:text-link dark:group-focus:text-link-dark"
         displayDirection={type === 'Previous' ? 'start' : 'end'}
       />
-<<<<<<< HEAD
-      <span>
-        <span className="block no-underline text-sm tracking-wide text-secondary dark:text-secondary-dark uppercase font-bold group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">
-          {type === 'Previous' ? 'Wstecz' : 'Dalej'}
-=======
       <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}
->>>>>>> 35530eea4bb8ba2567c1f57f1ccf730cc89b76de
+          {type === 'Previous' ? 'Wstecz' : 'Dalej'}
         </span>
         <span className="text-lg break-words group-hover:underline">
           {title}

src/components/Layout/Feedback.tsx

@@ -61,29 +61,18 @@ function sendGAEvent(isPositive: boolean) {
 function SendFeedback({onSubmit}: {onSubmit: () => void}) {
   const [isSubmitted, setIsSubmitted] = useState(false);
   return (
-<<<<<<< HEAD
-    <div className="max-w-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex">
-      <p className="w-full font-bold text-primary dark:text-primary-dark text-lg me-4">
-        {isSubmitted ? 'Dziękujemy za opinię!' : 'Czy ta strona była pomocna?'}
-      </p>
-      {!isSubmitted && (
-        <button
-          aria-label="Tak"
-          className="bg-secondary-button dark:bg-secondary-button-dark rounded-lg text-primary dark:text-primary-dark px-3 me-2"
-=======
     <div
       className={cn(
         'max-w-custom-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex',
         {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 ? 'Dziękujemy za opinię!' : 'Czy ta strona była pomocna?'}
       </p>
       {!isSubmitted && (
         <button
-          aria-label="Yes"
+          aria-label="Tak"
           className="px-3 rounded-lg bg-secondary-button dark:bg-secondary-button-dark text-primary dark:text-primary-dark me-2"
->>>>>>> 35530eea4bb8ba2567c1f57f1ccf730cc89b76de
           onClick={() => {
             setIsSubmitted(true);
             onSubmit();
@@ -94,13 +83,8 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
       )}
       {!isSubmitted && (
         <button
-<<<<<<< HEAD
           aria-label="Nie"
-          className="bg-secondary-button dark:bg-secondary-button-dark rounded-lg text-primary dark:text-primary-dark px-3"
-=======
-          aria-label="No"
           className="px-3 rounded-lg bg-secondary-button dark:bg-secondary-button-dark text-primary dark:text-primary-dark"
->>>>>>> 35530eea4bb8ba2567c1f57f1ccf730cc89b76de
           onClick={() => {
             setIsSubmitted(true);
             onSubmit();

src/components/SocialBanner.tsx

@@ -7,15 +7,9 @@ import {useRef, useEffect} from 'react';
 import cn from 'classnames';
 import {ExternalLink} from './ExternalLink';
 
-<<<<<<< HEAD
-const bannerText = 'Wesprzyj Ukrainę 🇺🇦';
-const bannerLink = 'https://opensource.fb.com/support-ukraine';
-const bannerLinkText = 'Wesprzyj pomoc humanitarną dla Ukrainy.';
-=======
-const bannerText = 'Join us for React Conf on May 15-16.';
+const bannerText = 'Dołącz do nas na React Conf 15-16 maja.';
 const bannerLink = 'https://conf.react.dev/';
-const bannerLinkText = 'Learn more.';
->>>>>>> 35530eea4bb8ba2567c1f57f1ccf730cc89b76de
+const bannerLinkText = 'Dowiedz się więcej.';
 
 export default function SocialBanner() {
   const ref = useRef<HTMLDivElement | null>(null);

src/content/learn/conditional-rendering.md

@@ -629,11 +629,6 @@ Zwróć uwagę, że należy tu napisać `importance > 0 && ...`, zamiast `import
 
 W tym rozwiązaniu dwa oddzielne warunki zostały użyte w celu wstawienia spacji między nazwą przedmiotu a wartością priorytetu. Alternatywnie, można użyć fragmentu, na początku którego wstawiłoby się spację: `importance > 0 && <> <i>...</i></>` lub można również wstawić spację wewnątrz `<i>`:  `importance > 0 && <i> ...</i>`.
 
-<<<<<<< HEAD
-=======
-In this solution, two separate conditions are used to insert a space between the name and the importance label. Alternatively, you could use a Fragment with a leading space: `importance > 0 && <> <i>...</i></>` or add a space immediately inside the `<i>`:  `importance > 0 && <i> ...</i>`.
->>>>>>> 35530eea4bb8ba2567c1f57f1ccf730cc89b76de
-
 </Solution>
 
 #### Zamień szereg warunków `? :` na `if` ze zmiennymi {/*refactor-a-series-of---to-if-and-variables*/}

src/content/learn/describing-the-ui.md

@@ -10,7 +10,6 @@ React jest biblioteką javascriptową służącą do renderowania interfejsu uż
 
 <YouWillLearn isChapter={true}>
 
-<<<<<<< HEAD
 * [Jak napisać swój pierwszy komponent](/learn/your-first-component)
 * [Kiedy i jak tworzyć wielokomponentowe pliki](/learn/importing-and-exporting-components)
 * [Jak dodać znaczniki do JavaScriptu za pomocą JSX](/learn/writing-markup-with-jsx)
@@ -19,17 +18,7 @@ React jest biblioteką javascriptową służącą do renderowania interfejsu uż
 * [Jak wyrenderować komponenty warunkowo](/learn/conditional-rendering)
 * [Jak wyrenderować wiele komponentów jednocześnie](/learn/rendering-lists)
 * [Jak unikać trudnych w zwalczaniu błędów poprzez tworzenie czystych komponentów](/learn/keeping-components-pure)
-=======
-* [How to write your first React component](/learn/your-first-component)
-* [When and how to create multi-component files](/learn/importing-and-exporting-components)
-* [How to add markup to JavaScript with JSX](/learn/writing-markup-with-jsx)
-* [How to use curly braces with JSX to access JavaScript functionality from your components](/learn/javascript-in-jsx-with-curly-braces)
-* [How to configure components with props](/learn/passing-props-to-a-component)
-* [How to conditionally render components](/learn/conditional-rendering)
-* [How to render multiple components at a time](/learn/rendering-lists)
-* [How to avoid confusing bugs by keeping components pure](/learn/keeping-components-pure)
-* [Why understanding your UI as trees is useful](/learn/understanding-your-ui-as-a-tree)
->>>>>>> 35530eea4bb8ba2567c1f57f1ccf730cc89b76de
+* [Dlaczego warto patrzeć na UI jak na drzewo](/learn/understanding-your-ui-as-a-tree)
 
 </YouWillLearn>
 
@@ -535,42 +524,30 @@ Aby dowiedzieć się jak pisać czyste funkcje o łatwym do przewidzenia wyniku
 
 </LearnMore>
 
-<<<<<<< HEAD
-## Co dalej? {/*whats-next*/}
-=======
-## Your UI as a tree {/*your-ui-as-a-tree*/}
-
-React uses trees to model the relationships between components and modules. 
-
-A React render tree is a representation of the parent and child relationship between components. 
+## Twój UI jako drzewo {/*your-ui-as-a-tree*/}
 
-<Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top the tree graph and is labelled 'Root Component'. It has two arrows extending down to two nodes labelled 'Component A' and 'Component C'. Each of the arrows is labelled with 'renders'. 'Component A' has a single 'renders' arrow to a node labelled 'Component B'. 'Component C' has a single 'renders' arrow to a node labelled 'Component D'.">
+React używa drzew do modelowania relacji pomiędzy komponentami i modułami.
 
-An example React render tree.
+Drzewo renderowania w Reakcie to reprezentacja relacji rodzic-dziecko między komponentami.
 
-</Diagram>
+<Diagram name="generic_render_tree" height={250} width={500} alt="Graf drzewa z pięcioma węzłami, każdy z nich reprezentuje komponent. Węzeł korzenia znajduje się u góry grafu drzewa i jest oznaczony jako 'Root Component'. Ma on dwie strzałki rozciągające się w dół do dwóch węzłów oznaczonych jako 'Component A' i 'Component C'. Każda z strzałek jest oznaczona jako 'renders'. 'Component A' ma pojedynczą strzałkę 'renders' do węzła oznaczonego jako 'Component B'. 'Component C' ma pojedynczą strzałkę 'renders' do węzła oznaczonego jako 'Component D'.">Przykład drzewa renderowania w Reakcie.</Diagram>
 
-Components near the top of the tree, near the root component, are considered top-level components. Components with no child components are leaf components. This categorization of components is useful for understanding data flow and rendering performance.
+Komponenty blisko góry drzewa, w okolicach głównego komponentu (ang. _root component_), uważane są za komponenty najwyższego poziomu (ang. _top-level components_). Komponenty, które nie posiadają komponentów potomnych, są liśćmi (ang. _leaf components_). Takie kategoryzowanie komponentów jest przydatne do zrozumienia przepływu danych i wydajności renderowania.
 
-Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree. 
+Modelowanie relacji między modułami javascriptowymi to kolejny przydatny sposób na zrozumienia jak działa aplikacja. Nazywamy to drzewem zależności modułów.
 
-<Diagram name="generic_dependency_tree" height={250} width={500} alt="A tree graph with five nodes. Each node represents a JavaScript module. The top-most node is labelled 'RootModule.js'. It has three arrows extending to the nodes: 'ModuleA.js', 'ModuleB.js', and 'ModuleC.js'. Each arrow is labelled as 'imports'. 'ModuleC.js' node has a single 'imports' arrow that points to a node labelled 'ModuleD.js'.">
+<Diagram name="generic_dependency_tree" height={250} width={500} alt="Graf drzewa z pięcioma węzłami. Każdy węzeł reprezentuje moduł JavaScript. Najwyższy węzeł jest oznaczony jako 'RootModule.js'. Ma trzy strzałki rozciągające się do węzłów: 'ModuleA.js', 'ModuleB.js' i 'ModuleC.js'. Każda strzałka jest oznaczona jako 'imports'. Węzeł 'ModuleC.js' ma pojedynczą strzałkę 'imports', która wskazuje na węzeł oznaczony jako 'ModuleD.js'. ">Przykład drzewa zależności modułów.</Diagram>
 
-An example module dependency tree.
-
-</Diagram>
-
-A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues. 
+Drzewo zależności jest często wykorzystywane przez narzędzia do budowania w celu bundlowania całego kodu JavaScript, niezbędnego dla klienta do pobrania i renderowania. Duży rozmiar bundla wpływa negatywnie na doświadczenie użytkownika w aplikacjach reactowych. Zrozumienie drzewa zależności modułów jest pomocne przy debugowania tego typu problemów.
 
 <LearnMore path="/learn/understanding-your-ui-as-a-tree">
 
-Read **[Your UI as a Tree](/learn/understanding-your-ui-as-a-tree)** to learn how to create a render and module dependency trees for a React app and how they're useful mental models for improving user experience and performance.
+Przeczytaj rozdział **[Twój UI jako drzewo](/learn/understanding-your-ui-as-a-tree)**, aby dowiedzieć się, jak tworzyć drzewa renderowania i zależności modułów dla aplikacji reactowych oraz jak mogą być one przydatne jako modele mentalne używane do poprawy doświadczenia użytkownika i wydajności aplikacji.
 
 </LearnMore>
 
 
-## What's next? {/*whats-next*/}
->>>>>>> 35530eea4bb8ba2567c1f57f1ccf730cc89b76de
+## Co dalej? {/*whats-next*/}
 
 Zacznij od rozdziału pt. [Twój pierwszy komponent](/learn/your-first-component)!
 

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

@@ -281,13 +281,8 @@ export default function App() {
 }
 ```
 
-<<<<<<< HEAD
-```js Gallery.js active
-// Przenieś mnie do pliku Profile.js!
-=======
 ```js src/Gallery.js active
-// Move me to Profile.js!
->>>>>>> 35530eea4bb8ba2567c1f57f1ccf730cc89b76de
+// Przenieś mnie do pliku Profile.js!
 export function Profile() {
   return (
     <img

src/content/learn/passing-props-to-a-component.md

@@ -104,13 +104,8 @@ To, co wyrenderuje `Avatar`, możemy kontrolować na wiele różnych sposobów,
 
 <Sandpack>
 
-<<<<<<< HEAD
-```js App.js
-import {getImageUrl} from './utils.js';
-=======
 ```js src/App.js
 import { getImageUrl } from './utils.js';
->>>>>>> 35530eea4bb8ba2567c1f57f1ccf730cc89b76de
 
 function Avatar({person, size}) {
   return (
@@ -300,13 +295,8 @@ export default function Profile() {
 }
 ```
 
-<<<<<<< HEAD
-```js Avatar.js
-import {getImageUrl} from './utils.js';
-=======
 ```js src/Avatar.js
 import { getImageUrl } from './utils.js';
->>>>>>> 35530eea4bb8ba2567c1f57f1ccf730cc89b76de
 
 export default function Avatar({person, size}) {
   return (
@@ -363,16 +353,6 @@ Spróbuj zmienić kolor, wybierając opcję z poniższej listy rozwijanej:
 
 <Sandpack>
 
-<<<<<<< HEAD
-```js Clock.js active
-export default function Clock({color, time}) {
-  return <h1 style={{color: color}}>{time}</h1>;
-}
-```
-
-```js App.js hidden
-import {useState, useEffect} from 'react';
-=======
 ```js src/Clock.js active
 export default function Clock({ color, time }) {
   return (
@@ -385,7 +365,6 @@ export default function Clock({ color, time }) {
 
 ```js src/App.js hidden
 import { useState, useEffect } from 'react';
->>>>>>> 35530eea4bb8ba2567c1f57f1ccf730cc89b76de
 import Clock from './Clock.js';
 
 function useTime() {
@@ -446,13 +425,8 @@ Ten komponent `Gallery` zawiera bardzo podobny kod dla dwóch profili. Wyodrębn
 
 <Sandpack>
 
-<<<<<<< HEAD
-```js App.js
-import {getImageUrl} from './utils.js';
-=======
 ```js src/App.js
 import { getImageUrl } from './utils.js';
->>>>>>> 35530eea4bb8ba2567c1f57f1ccf730cc89b76de
 
 export default function Gallery() {
   return (
@@ -561,13 +535,8 @@ Zwróć uwagę, że właściwość `imageSize` ma wartość domyślną. To dlate
 
 <Sandpack>
 
-<<<<<<< HEAD
-```js App.js
-import {getImageUrl} from './utils.js';
-=======
 ```js src/App.js
 import { getImageUrl } from './utils.js';
->>>>>>> 35530eea4bb8ba2567c1f57f1ccf730cc89b76de
 
 function Profile({
   imageId,
@@ -672,13 +641,8 @@ Inne rozwiązanie, nieco bardziej podobne do poprzednich przykładów na tej str
 
 <Sandpack>
 
-<<<<<<< HEAD
-```js App.js
-import {getImageUrl} from './utils.js';
-=======
 ```js src/App.js
 import { getImageUrl } from './utils.js';
->>>>>>> 35530eea4bb8ba2567c1f57f1ccf730cc89b76de
 
 function Profile({person, imageSize = 70}) {
   const imageSrc = getImageUrl(person);
@@ -788,13 +752,8 @@ Zmień komponent `Avatar` tak, aby ustawiał rozmiar obrazka na podstawie właś
 
 <Sandpack>
 
-<<<<<<< HEAD
-```js App.js
-import {getImageUrl} from './utils.js';
-=======
 ```js src/App.js
 import { getImageUrl } from './utils.js';
->>>>>>> 35530eea4bb8ba2567c1f57f1ccf730cc89b76de
 
 function Avatar({person, size}) {
   return (
@@ -842,13 +801,8 @@ Oto możliwe rozwiązanie:
 
 <Sandpack>
 
-<<<<<<< HEAD
-```js App.js
-import {getImageUrl} from './utils.js';
-=======
 ```js src/App.js
 import { getImageUrl } from './utils.js';
->>>>>>> 35530eea4bb8ba2567c1f57f1ccf730cc89b76de
 
 function Avatar({person, size}) {
   let thumbnailSize = 's';
@@ -907,13 +861,8 @@ Możesz także pokazać nieco ostrzejszą wersję obrazka dla ekranów z wysokim
 
 <Sandpack>
 
-<<<<<<< HEAD
-```js App.js
-import {getImageUrl} from './utils.js';
-=======
 ```js src/App.js
 import { getImageUrl } from './utils.js';
->>>>>>> 35530eea4bb8ba2567c1f57f1ccf730cc89b76de
 
 const ratio = window.devicePixelRatio;