diff --git a/src/components/Candidate/Candidate.js b/src/components/Candidate/Candidate.js index 6f14dfc2..55c93a66 100644 --- a/src/components/Candidate/Candidate.js +++ b/src/components/Candidate/Candidate.js @@ -1,23 +1,24 @@ import React from 'react'; -import { NavLink } from 'react-router-dom'; - -// import PhotoBlock from './PhotoBlock'; - -// import { candidatesList } from '../Home/Home' +import { useParams, useHistory } from 'react-router-dom'; +import { candidatesList } from '../Home/sections/Description'; import classes from './Candidate.module.scss'; const Candidate = () => { - // const { id: candidateId } = useParams(); - // const currentCandidate = candidatesList.find((el) => el.id === Number(candidateId)); + const history = useHistory(); + + const { id: candidateId } = useParams(); + + const currentCandidate = candidatesList.find((el) => el.id === Number(candidateId)); return (
- Home - {/*

+ +

Candidate name: {currentCandidate.name}

- */}
); }; diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js index 8afd2984..446aacd4 100644 --- a/src/components/Home/Home.js +++ b/src/components/Home/Home.js @@ -1,16 +1,15 @@ import React from 'react'; import Outstaffing from './sections/Outstaffing'; import Description from './sections/Description'; +import Search from './sections/Search'; const Home = () => { return ( -
- {/*

HomePage

- */} - + <> + -
+ ); }; diff --git a/src/components/Home/sections/Description.js b/src/components/Home/sections/Description.js index bda9e78a..83b1594c 100644 --- a/src/components/Home/sections/Description.js +++ b/src/components/Home/sections/Description.js @@ -4,7 +4,7 @@ import photo from '../../../images/medium_male.png'; import rectangle from '../../../images/rectangle_secondPage.png'; import arrowLeft from '../../../images/arrow_left.png'; import arrowRight from '../../../images/arrow_right.png'; -import { Link } from 'react-router-dom'; +import { NavLink } from 'react-router-dom'; export const candidatesList = [ { id: 1, name: 'Artyom' }, @@ -30,9 +30,9 @@ const Description = () => {

- 3 года преподаю в IOS-школе Сбера

- + - +
@@ -50,9 +50,7 @@ const Description = () => {
- +
diff --git a/src/components/Home/sections/Description.module.scss b/src/components/Home/sections/Description.module.scss index 050b6a89..34d8e2e6 100644 --- a/src/components/Home/sections/Description.module.scss +++ b/src/components/Home/sections/Description.module.scss @@ -72,17 +72,15 @@ border: 1px solid #5ab424; background-color: white; margin-right: 60px; - & a { - text-decoration: none; - color: #a0a0a0; - font-family: "GT Eesti Pro Display"; - font-size: 18px; - font-weight: 600; - font-style: normal; - letter-spacing: normal; - line-height: normal; - text-align: left; - } + color: #a0a0a0; + font-family: "GT Eesti Pro Display"; + font-size: 18px; + font-weight: 600; + font-style: normal; + letter-spacing: normal; + line-height: normal; + text-align: center; + } } &__box { diff --git a/src/components/Home/sections/Search.js b/src/components/Home/sections/Search.js new file mode 100644 index 00000000..b7f32a0b --- /dev/null +++ b/src/components/Home/sections/Search.js @@ -0,0 +1,23 @@ +import React from 'react'; +import style from './Search.module.scss'; + +const Search = () => { + return ( +
+
+
+
+

Найти специалиста по навыкам

+ +
+ + +
+
+
+
+
+ ); +}; + +export default Search; diff --git a/src/components/Home/sections/Search.module.scss b/src/components/Home/sections/Search.module.scss new file mode 100644 index 00000000..dde648d5 --- /dev/null +++ b/src/components/Home/sections/Search.module.scss @@ -0,0 +1,46 @@ +.search { + margin-top: 40px; + & h2 { + font-family: "GT Eesti Pro Display"; + font-size: 24px; + font-weight: 700; + font-style: normal; + letter-spacing: normal; + line-height: normal; + text-align: center; + margin-bottom: 40px; + } + & form { + position: relative; + width: 100%; + height: 60px; + border: 1px solid whitesmoke; + & input { + width: 100%; + height: 100%; + border: none; + margin-left: 160px; + font-size: 18px; + } + & input:focus, + & input:active { + outline: none; + } + & button { + position: absolute; + top: 15%; + left: 1%; + width: 131px; + height: 40px; + border-radius: 10px; + background-color: #e8e8e8; + border: none; + font-family: "GT Eesti Pro Display"; + font-size: 18px; + font-weight: 400; + font-style: normal; + letter-spacing: normal; + text-align: center; + } + } +} \ No newline at end of file