From df3f21ddffb5ff6dc6dfc7b3ccb97c6fb9a40020 Mon Sep 17 00:00:00 2001
From: Andriy Monko <Andriy17monko@gmail.com>
Date: Tue, 1 Aug 2023 12:22:24 +0300
Subject: [PATCH 1/2] practical task 3

---
 src/App.jsx                      | 25 ++++++++++------------
 src/components/Person/Person.jsx | 36 +++++++++++++++++++++++++++++++-
 2 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index dcf8509c8..58f3ebee7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import './App.scss';
+import { Person } from './components/Person/Person';
 
 export const misha = {
   name: 'Misha',
@@ -25,21 +26,17 @@ export const alex = {
 
 export const App = () => (
   <div className="App">
-    <section className="Person">
-      <h2 className="Person__name">My name is Misha</h2>
-      <p className="Person__age">I am 37</p>
-      <p className="Person__partner">Natasha is my wife</p>
-    </section>
 
-    <section className="Person">
-      <h2 className="Person__name">My name is Olya</h2>
-      <p className="Person__partner">Maksym is my husband</p>
-    </section>
+    <Person
+      person={misha}
+    />
 
-    <section className="Person">
-      <h2 className="Person__name">My name is Alex</h2>
-      <p className="Person__age">I am 25</p>
-      <p className="Person__partner">I am not married</p>
-    </section>
+    <Person
+      person={olya}
+    />
+
+    <Person
+      person={alex}
+    />
   </div>
 );
diff --git a/src/components/Person/Person.jsx b/src/components/Person/Person.jsx
index eccf156a3..251abd0fc 100644
--- a/src/components/Person/Person.jsx
+++ b/src/components/Person/Person.jsx
@@ -1 +1,35 @@
-// export const Person = ({ person }) => ();
+
+export const Person = ({ person }) => (
+  <section className="Person">
+    <h2 className="Person__name">
+      {`My name is ${person.name}`}
+    </h2>
+
+    {person.hasOwnProperty('age')
+      ? (
+        <p className="Person__age">
+          {`I am ${person.age}`}
+        </p>
+      ) : null}
+
+    {person.isMarried === false
+      ? (
+        <p className="Person__partner">
+          I am not married
+        </p>
+      ) : null}
+
+    { person.hasOwnProperty('partnerName') && person.sex === 'f' && (
+    <p className="Person__partner">
+      {`${person.partnerName} is my husband`}
+    </p>
+    )}
+
+    { person.hasOwnProperty('partnerName') && person.sex === 'm' && (
+    <p className="Person__partner">
+      {`${person.partnerName} is my wife`}
+    </p>
+    )}
+
+  </section>
+);

From 28e3149f236d0057c923d63d1c25fdfeaaf585db Mon Sep 17 00:00:00 2001
From: Andriy Monko <Andriy17monko@gmail.com>
Date: Mon, 7 Aug 2023 16:37:28 +0300
Subject: [PATCH 2/2] pt 3.0

---
 src/components/Person/Person.jsx | 47 ++++++++++++--------------------
 1 file changed, 18 insertions(+), 29 deletions(-)

diff --git a/src/components/Person/Person.jsx b/src/components/Person/Person.jsx
index 251abd0fc..ac2c56d48 100644
--- a/src/components/Person/Person.jsx
+++ b/src/components/Person/Person.jsx
@@ -1,35 +1,24 @@
 
-export const Person = ({ person }) => (
-  <section className="Person">
-    <h2 className="Person__name">
-      {`My name is ${person.name}`}
-    </h2>
+export const Person = ({ person }) => {
+  const partner = person.sex === 'f' ? 'husband' : 'wife';
 
-    {person.hasOwnProperty('age')
-      ? (
+  return (
+    <section className="Person">
+      <h2 className="Person__name">
+        {`My name is ${person.name}`}
+      </h2>
+
+      {person.age && (
         <p className="Person__age">
           {`I am ${person.age}`}
         </p>
-      ) : null}
-
-    {person.isMarried === false
-      ? (
-        <p className="Person__partner">
-          I am not married
-        </p>
-      ) : null}
-
-    { person.hasOwnProperty('partnerName') && person.sex === 'f' && (
-    <p className="Person__partner">
-      {`${person.partnerName} is my husband`}
-    </p>
-    )}
-
-    { person.hasOwnProperty('partnerName') && person.sex === 'm' && (
-    <p className="Person__partner">
-      {`${person.partnerName} is my wife`}
-    </p>
-    )}
+      )}
 
-  </section>
-);
+      <p className="Person__partner">
+        {person.isMarried
+          ? `${person.partnerName} is my ${partner}`
+          : 'I am not married'}
+      </p>
+    </section>
+  );
+};