diff --git a/README.md b/README.md index 3424ccb86..d049794f3 100644 --- a/README.md +++ b/README.md @@ -12,4 +12,4 @@ and use it 3 times inside the `App` instead of static markup. ## Instructions - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline). - Open one more terminal and run tests with `npm test` to ensure your solution is correct. -- Replace `` with your Github username in the [DEMO LINK](https://.github.io/react_person/) and add it to the PR description. +- Replace `` with your Github username in the [DEMO LINK](https://00Mass00.github.io/react_person/) and add it to the PR description. diff --git a/src/App.jsx b/src/App.jsx index dcf8509c8..b3da25285 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,6 +1,8 @@ import React from 'react'; import './App.scss'; +import { Person } from './components/Person/Person'; + export const misha = { name: 'Misha', age: 37, @@ -25,21 +27,8 @@ export const alex = { export const App = () => (
-
-

My name is Misha

-

I am 37

-

Natasha is my wife

-
- -
-

My name is Olya

-

Maksym is my husband

-
- -
-

My name is Alex

-

I am 25

-

I am not married

-
+ + +
); diff --git a/src/components/Person/Person.jsx b/src/components/Person/Person.jsx index eccf156a3..856a830c5 100644 --- a/src/components/Person/Person.jsx +++ b/src/components/Person/Person.jsx @@ -1 +1,42 @@ -// export const Person = ({ person }) => (); +const MALE = 'm'; +const WIFE = 'wife'; +const HUSBAND = 'husband'; +const NOT_MARRIED_PERSON_MESSAGE = 'I am not married'; + +const getPartner = (isMarried, sex) => { + if (isMarried) { + return sex === MALE + ? WIFE + : HUSBAND; + } + + return NOT_MARRIED_PERSON_MESSAGE; +}; + +export const Person = ({ person }) => { + const { + name, + age, + sex, + isMarried, + partnerName, + } = person; + + const partnerInfo = partnerName + ? `${partnerName} is my ${getPartner(isMarried, sex)}` + : NOT_MARRIED_PERSON_MESSAGE; + + return ( +
+

+ {`My name is ${name}`} +

+ {age && ( +

{`I am ${age}`}

+ )} +

+ {partnerInfo} +

+
+ ); +};