trackerTask #11
@ -2,7 +2,15 @@ import React from "react";
|
||||
|
||||
import "./catalogPersonCard.scss";
|
||||
|
||||
export const CatalogPersonCard = ({ img, name, salary, category, skills, level, description }) => {
|
||||
export const CatalogPersonCard = ({
|
||||
img,
|
||||
name,
|
||||
salary,
|
||||
category,
|
||||
skills,
|
||||
level,
|
||||
description
|
||||
}) => {
|
||||
return (
|
||||
<div className="catalogPersonCard">
|
||||
<div className="catalogPersonCard__head">
|
||||
@ -13,19 +21,21 @@ export const CatalogPersonCard = ({ img, name, salary, category, skills, level,
|
||||
<div className="catalogPersonCard__info">
|
||||
<span className="catalogPersonCard__name">{name}</span>
|
||||
<span className="catalogPersonCard__salary">{salary} / час</span>
|
||||
<p className="catalogPersonCard__category"><span>Разработка:</span> {category}</p>
|
||||
<p className="catalogPersonCard__category">
|
||||
<span>Разработка:</span> {category}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="catalogPersonCard__items">
|
||||
{skills.map((item, index) => {
|
||||
return <div className="catalogPersonCard__skillItem" key={index}>
|
||||
{item}
|
||||
</div>
|
||||
return (
|
||||
<div className="catalogPersonCard__skillItem" key={index}>
|
||||
{item}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<p className="catalogPersonCard__description">
|
||||
{description}
|
||||
</p>
|
||||
<p className="catalogPersonCard__description">{description}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
|
||||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { Footer } from "@components/Common/Footer/Footer";
|
||||
import CategoriesItem from "@components/CategoriesItem/CategoriesItem";
|
||||
import CatalogPersonCard from "@components/CatalogPersonCard/CatalogPersonCard";
|
||||
import CategoriesItem from "@components/CategoriesItem/CategoriesItem";
|
||||
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
|
||||
import { Footer } from "@components/Common/Footer/Footer";
|
||||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import SideBar from "@components/SideBar/SideBar";
|
||||
|
||||
import mockWorker from "assets/images/mock/mokPerson.png";
|
||||
import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
|
||||
import FrontendImg from "assets/images/partnerProfile/PersonalFrontend.svg";
|
||||
import ArchitectureImg from "assets/images/partnerProfile/PersonalArchitecture.svg";
|
||||
import DesignImg from "assets/images/partnerProfile/PersonalDesign.svg";
|
||||
import TestImg from "assets/images/partnerProfile/PersonalTesters.svg";
|
||||
import AdminImg from "assets/images/partnerProfile/PersonalAdmin.svg";
|
||||
import ManageImg from "assets/images/partnerProfile/PersonalMng.svg";
|
||||
import ArchitectureImg from "assets/images/partnerProfile/PersonalArchitecture.svg";
|
||||
import CopyImg from "assets/images/partnerProfile/PersonalCopy.svg";
|
||||
import DesignImg from "assets/images/partnerProfile/PersonalDesign.svg";
|
||||
import FrontendImg from "assets/images/partnerProfile/PersonalFrontend.svg";
|
||||
import ManageImg from "assets/images/partnerProfile/PersonalMng.svg";
|
||||
import SmmImg from "assets/images/partnerProfile/PersonalSMM.svg";
|
||||
import TestImg from "assets/images/partnerProfile/PersonalTesters.svg";
|
||||
import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
|
||||
|
||||
import "./catalogSpecialists.scss";
|
||||
|
||||
@ -90,7 +90,8 @@ const CatalogSpecialists = () => {
|
||||
category: "Front End",
|
||||
level: "Middle+",
|
||||
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
||||
description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||
description:
|
||||
"Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||
},
|
||||
{
|
||||
name: "Виталий Д.",
|
||||
@ -99,7 +100,8 @@ const CatalogSpecialists = () => {
|
||||
category: "Front End",
|
||||
level: "Middle+",
|
||||
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
||||
description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||
description:
|
||||
"Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||
},
|
||||
{
|
||||
name: "Виталий Д.",
|
||||
@ -108,7 +110,8 @@ const CatalogSpecialists = () => {
|
||||
category: "Front End",
|
||||
level: "Middle+",
|
||||
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
||||
description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||
description:
|
||||
"Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||
},
|
||||
{
|
||||
name: "Виталий Д.",
|
||||
@ -117,7 +120,8 @@ const CatalogSpecialists = () => {
|
||||
category: "Front End",
|
||||
level: "Middle+",
|
||||
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
||||
description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||
description:
|
||||
"Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||
},
|
||||
{
|
||||
name: "Виталий Д.",
|
||||
@ -126,7 +130,8 @@ const CatalogSpecialists = () => {
|
||||
category: "Front End",
|
||||
level: "Middle+",
|
||||
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
||||
description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||
description:
|
||||
"Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||
},
|
||||
{
|
||||
name: "Виталий Д.",
|
||||
@ -135,9 +140,10 @@ const CatalogSpecialists = () => {
|
||||
category: "Front End",
|
||||
level: "Middle+",
|
||||
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
||||
description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||
description:
|
||||
"Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||
}
|
||||
]
|
||||
];
|
||||
return (
|
||||
<section className="catalogSpecialists">
|
||||
<AuthHeader />
|
||||
@ -154,7 +160,7 @@ const CatalogSpecialists = () => {
|
||||
<div className="countInfo__imgWrapper">
|
||||
<img src={mockWorker} alt="worker" />
|
||||
</div>
|
||||
<p>🖐 50+ специалистов доступны</p>
|
||||
<p>🖐 50+ специалистов доступны</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="catalogSpecialists__items">
|
||||
@ -171,23 +177,27 @@ const CatalogSpecialists = () => {
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<h3 className="catalogSpecialists__searchTitle">Найти специалиста по навыкам</h3>
|
||||
<h3 className="catalogSpecialists__searchTitle">
|
||||
Найти специалиста по навыкам
|
||||
</h3>
|
||||
<div className="catalogSpecialists__searchBlock">
|
||||
<input type="text" />
|
||||
<button>Поиск</button>
|
||||
</div>
|
||||
<div className="catalogSpecialists__employees">
|
||||
{mockPersons.map((person, index) => {
|
||||
return <CatalogPersonCard
|
||||
name={person.name}
|
||||
img={person.img}
|
||||
salary={person.salary}
|
||||
category={person.category}
|
||||
level={person.level}
|
||||
skills={person.skills}
|
||||
description={person.description}
|
||||
key={index}
|
||||
/>
|
||||
return (
|
||||
<CatalogPersonCard
|
||||
name={person.name}
|
||||
img={person.img}
|
||||
salary={person.salary}
|
||||
category={person.category}
|
||||
level={person.level}
|
||||
skills={person.skills}
|
||||
description={person.description}
|
||||
key={index}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<Footer />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user