apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

catalogSpecialists

Browse Source
This commit is contained in:
Mikola 2024-01-29 21:19:39 +03:00
parent 3765f96c56
commit 31faa56d9f
2 changed files with 57 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/CatalogPersonCard/CatalogPersonCard.jsx
View File

@ -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 (
<div className="catalogPersonCard__skillItem" key={index}>
{item} {item}
</div> </div>
);
})} })}
</div> </div>
<p className="catalogPersonCard__description"> <p className="catalogPersonCard__description">{description}</p>
{description}
</p>
</div> </div>
); );
}; };

48
src/pages/CatalogSpecialists/CatalogSpecialists.jsx
View File

@ -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 />
@ -171,14 +177,17 @@ 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 (
<CatalogPersonCard
name={person.name} name={person.name}
img={person.img} img={person.img}
salary={person.salary} salary={person.salary}
@ -188,6 +197,7 @@ const CatalogSpecialists = () => {
description={person.description} description={person.description}
key={index} key={index}
/> />
);
})} })}
</div> </div>
<Footer /> <Footer />