catalogSpecialists

src/components/CatalogPersonCard/CatalogPersonCard.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import "./catalogPersonCard.scss";
+
+export const CatalogPersonCard = ({ img, name, salary, category, skills, level, description }) => {
+  return (
+    <div className="catalogPersonCard">
+      <div className="catalogPersonCard__head">
+        <div className="catalogPersonCard__avatar">
+          <img src={img} alt="avatar" />
+          <span className="catalogPersonCard__skill">{level}</span>
+        </div>
+        <div className="catalogPersonCard__info">
+          <span className="catalogPersonCard__name">{name}</span>
+          <span className="catalogPersonCard__salary">{salary} / час</span>
+          <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>
+        })}
+      </div>
+      <p className="catalogPersonCard__description">
+        {description}
+      </p>
+    </div>
+  );
+};
+
+export default CatalogPersonCard;

src/components/CatalogPersonCard/catalogPersonCard.scss

@@ -0,0 +1,98 @@
+.catalogPersonCard {
+  background: #FFFFFF;
+  padding: 29px 32px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  max-width: 340px;
+
+  &__head {
+    display: flex;
+    align-items: center;
+  }
+
+  &__avatar {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    img {
+      width: 83px;
+      height: 83px;
+    }
+  }
+
+  &__skill {
+    position: absolute;
+    bottom: -10px;
+    padding: 3.5px 19px;
+    border-radius: 44px;
+    background: #1458DD;
+    color: white;
+    font-size: 14px;
+  }
+
+  &__info {
+    display: flex;
+    margin-left: 13.5px;
+    flex-direction: column;
+    row-gap: 15px;
+  }
+
+  &__name {
+    font-size: 20px;
+    line-height: 22px;
+    color: #000000;
+    font-weight: 700;
+  }
+
+  &__salary {
+    color: #1458DD;
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 22px;
+  }
+
+  &__category {
+    span {
+      color: #6F6F6F;
+      font-size: 12px;
+      line-height: 18px;
+      font-weight: 400;
+    }
+
+    color: #263238;
+    font-size: 16px;
+    line-height: 22px;
+    font-weight: 500;
+  }
+
+  &__items {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 5.5px;
+    row-gap: 16px;
+    margin-top: 22px;
+    padding-bottom: 17px;
+    border-bottom: 0.5px solid #B3DF93;
+  }
+
+  &__skillItem {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    color: #6F6F6F;
+    width: 62px;
+    height: 26px;
+    border: 0.5px solid #8DC63F;
+    border-radius: 44px;
+  }
+
+  &__description {
+    margin-top: 17px;
+    max-width: 245px;
+    color: #6F6F6F;
+    font-size: 12px;
+    line-height: 18px;
+  }
+}