catalogSpecialists
This commit is contained in:
Mikola
parent
3765f96c56
commit
31faa56d9f
@ -2,7 +2,15 @@ import React from "react";
|
|||||||
|
|
||||||
import "./catalogPersonCard.scss";
|
import "./catalogPersonCard.scss";
|
||||||
|
|
||||||
export const CatalogPersonCard = ({ img, name, salary, category, skills, level, description }) => {
|
export const CatalogPersonCard = ({
|
||||||
|
img,
|
||||||
|
name,
|
||||||
|
salary,
|
||||||
|
category,
|
||||||
|
skills,
|
||||||
|
level,
|
||||||
|
description
|
||||||
|
}) => {
|
||||||
return (
|
return (
|
||||||
<div className="catalogPersonCard">
|
<div className="catalogPersonCard">
|
||||||
<div className="catalogPersonCard__head">
|
<div className="catalogPersonCard__head">
|
||||||
@ -13,19 +21,21 @@ export const CatalogPersonCard = ({ img, name, salary, category, skills, level,
|
|||||||
<div className="catalogPersonCard__info">
|
<div className="catalogPersonCard__info">
|
||||||
<span className="catalogPersonCard__name">{name}</span>
|
<span className="catalogPersonCard__name">{name}</span>
|
||||||
<span className="catalogPersonCard__salary">{salary} / час</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>
|
</div>
|
||||||
<div className="catalogPersonCard__items">
|
<div className="catalogPersonCard__items">
|
||||||
{skills.map((item, index) => {
|
{skills.map((item, index) => {
|
||||||
return <div className="catalogPersonCard__skillItem" key={index}>
|
return (
|
||||||
{item}
|
<div className="catalogPersonCard__skillItem" key={index}>
|
||||||
</div>
|
{item}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
<p className="catalogPersonCard__description">
|
<p className="catalogPersonCard__description">{description}</p>
|
||||||
{description}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,22 +1,22 @@
|
|||||||
import React, { useState } from "react";
|
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 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 SideBar from "@components/SideBar/SideBar";
|
||||||
|
|
||||||
import mockWorker from "assets/images/mock/mokPerson.png";
|
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 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 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 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";
|
import "./catalogSpecialists.scss";
|
||||||
|
|
||||||
@ -90,7 +90,8 @@ const CatalogSpecialists = () => {
|
|||||||
category: "Front End",
|
category: "Front End",
|
||||||
level: "Middle+",
|
level: "Middle+",
|
||||||
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
||||||
description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
description:
|
||||||
|
"Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Виталий Д.",
|
name: "Виталий Д.",
|
||||||
@ -99,7 +100,8 @@ const CatalogSpecialists = () => {
|
|||||||
category: "Front End",
|
category: "Front End",
|
||||||
level: "Middle+",
|
level: "Middle+",
|
||||||
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
||||||
description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
description:
|
||||||
|
"Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Виталий Д.",
|
name: "Виталий Д.",
|
||||||
@ -108,7 +110,8 @@ const CatalogSpecialists = () => {
|
|||||||
category: "Front End",
|
category: "Front End",
|
||||||
level: "Middle+",
|
level: "Middle+",
|
||||||
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
||||||
description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
description:
|
||||||
|
"Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Виталий Д.",
|
name: "Виталий Д.",
|
||||||
@ -117,7 +120,8 @@ const CatalogSpecialists = () => {
|
|||||||
category: "Front End",
|
category: "Front End",
|
||||||
level: "Middle+",
|
level: "Middle+",
|
||||||
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
||||||
description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
description:
|
||||||
|
"Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Виталий Д.",
|
name: "Виталий Д.",
|
||||||
@ -126,7 +130,8 @@ const CatalogSpecialists = () => {
|
|||||||
category: "Front End",
|
category: "Front End",
|
||||||
level: "Middle+",
|
level: "Middle+",
|
||||||
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
||||||
description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
description:
|
||||||
|
"Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Виталий Д.",
|
name: "Виталий Д.",
|
||||||
@ -135,9 +140,10 @@ const CatalogSpecialists = () => {
|
|||||||
category: "Front End",
|
category: "Front End",
|
||||||
level: "Middle+",
|
level: "Middle+",
|
||||||
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
skills: ["Java", "Java", "Solid", "Java", "Java", "PHP"],
|
||||||
description: "Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
description:
|
||||||
|
"Основное направление front разработки - Vue.JS Не возникает сложностей на этапах самостоятельной настройки системы сборки проекта Grunt/Gulp/Webpack, или работать с голым JS."
|
||||||
}
|
}
|
||||||
]
|
];
|
||||||
return (
|
return (
|
||||||
<section className="catalogSpecialists">
|
<section className="catalogSpecialists">
|
||||||
<AuthHeader />
|
<AuthHeader />
|
||||||
@ -154,7 +160,7 @@ const CatalogSpecialists = () => {
|
|||||||
<div className="countInfo__imgWrapper">
|
<div className="countInfo__imgWrapper">
|
||||||
<img src={mockWorker} alt="worker" />
|
<img src={mockWorker} alt="worker" />
|
||||||
</div>
|
</div>
|
||||||
<p>🖐 50+ специалистов доступны</p>
|
<p>🖐 50+ специалистов доступны</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="catalogSpecialists__items">
|
<div className="catalogSpecialists__items">
|
||||||
@ -171,23 +177,27 @@ const CatalogSpecialists = () => {
|
|||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
<h3 className="catalogSpecialists__searchTitle">Найти специалиста по навыкам</h3>
|
<h3 className="catalogSpecialists__searchTitle">
|
||||||
|
Найти специалиста по навыкам
|
||||||
|
</h3>
|
||||||
<div className="catalogSpecialists__searchBlock">
|
<div className="catalogSpecialists__searchBlock">
|
||||||
<input type="text" />
|
<input type="text" />
|
||||||
<button>Поиск</button>
|
<button>Поиск</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="catalogSpecialists__employees">
|
<div className="catalogSpecialists__employees">
|
||||||
{mockPersons.map((person, index) => {
|
{mockPersons.map((person, index) => {
|
||||||
return <CatalogPersonCard
|
return (
|
||||||
name={person.name}
|
<CatalogPersonCard
|
||||||
img={person.img}
|
name={person.name}
|
||||||
salary={person.salary}
|
img={person.img}
|
||||||
category={person.category}
|
salary={person.salary}
|
||||||
level={person.level}
|
category={person.category}
|
||||||
skills={person.skills}
|
level={person.level}
|
||||||
description={person.description}
|
skills={person.skills}
|
||||||
key={index}
|
description={person.description}
|
||||||
/>
|
key={index}
|
||||||
|
/>
|
||||||
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user