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

trackerTask #11

Merged
nik.polishuk merged 3 commits from trackerTask into main 2024-01-29 21:21:24 +03:00
Conversation 0 Commits 3 Files Changed 5 +57 -37
2 changed files with 57 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 31faa56d9f - Show all commits

26
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 (
{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>
); );
}; };

68
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 />
@ -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 />