catalogSpecialists

src/components/PartnerPersonCard/PartnerPersonCard.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { urlForLocal } from "@utils/helper";
+
+import rightArrow from "assets/icons/arrows/arrowRight.svg";
+
+import "./partnerPersonCard.scss";
+
+export const PartnerPersonCard = ({name, img, userId}) => {
+  return (
+    <div className="partnerPersonCard">
+      <div className="partnerPersonCard__img">
+        <img src={urlForLocal(img)} alt='avatar' />
+      </div>
+      <div className="partnerPersonCard__info">
+        <h2 className="partnerPersonCard__name">{name}</h2>
+        <Link className="partnerPersonCard__report" to={`calendar/${userId}`}>
+          Подробный отчет
+          <div className="partnerPersonCard__more">
+            <img src={rightArrow} alt='arrow' />
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default PartnerPersonCard;

src/components/PartnerPersonCard/partnerPersonCard.scss

@@ -0,0 +1,45 @@
+.partnerPersonCard {
+  display: flex;
+  position: relative;
+
+  &__img {
+    background: white;
+    border-radius: 12px;
+    padding: 25px;
+    z-index: 2;
+    img {
+      width: 77px;
+      height: 77px;
+    }
+  }
+
+  &__info {
+    position: relative;
+    background: #E1FCCF;
+    z-index: 1;
+    padding: 15px 15px 15px 30px;
+    left: -15px;
+    border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  &__report {
+    display: flex;
+    column-gap: 10px;
+    color: black;
+    font-size: 16px;
+    align-items: center;
+  }
+
+  &__more {
+    width: 41px;
+    height: 41px;
+    background: white;
+    border-radius: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}