profile achievements added

src/components/Achievement/Achievement.js

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import './achievement.scss'
+
+export const Achievement = ({ achievement }) => {
+  return (
+    <div className='achievement'>
+      <div className='achievement__icon'>
+        <img src={achievement.img} />
+      </div>
+      <div className='achievement__popup'>
+        <div className='achievement__title'>{achievement.title}</div>
+        <div className='achievement__description'>
+          {achievement.description}
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/Achievement/achievement.scss

@@ -0,0 +1,35 @@
+.achievement {
+  position: relative;
+  width: 50px;
+  height: 50px;
+  margin: 0 1rem;
+
+  &__popup {
+    position: absolute;
+    top: 50px;
+    left: 0;
+    width: 140px;
+    height: 60px;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    display: none;
+    text-align: left;
+  }
+
+  &__icon {
+    width: 50px;
+    height: 50px;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+
+  &:hover .achievement__popup {
+    display: block;
+  }
+}

src/components/Sidebar/Sidebar.js

@@ -1,37 +1,53 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import maleBig from '../../images/medium_male_big.png';
-import style from './Sidebar.module.css';
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { Achievement } from '../Achievement/Achievement'
+
+import maleBig from '../../images/medium_male_big.png'
+import './sidebar.scss'
 
 const getYearsString = (years) => {
-  let yearsString;
-  if (years%10 === 1) {
-    yearsString = 'год';
+  let yearsString
+  if (years % 10 === 1) {
+    yearsString = 'год'
   } else if (years === 11 || years === 12 || years === 13 || years === 14) {
-    yearsString = 'лет';
-  } else if (years%10 === 2 || years%10 === 3 || years%10 === 4) {
-    yearsString = 'года';
+    yearsString = 'лет'
+  } else if (years % 10 === 2 || years % 10 === 3 || years % 10 === 4) {
+    yearsString = 'года'
   } else {
-    yearsString = 'лет';
+    yearsString = 'лет'
   }
-  return `${years} ${yearsString}`;
+  return `${years} ${yearsString}`
 }
 
 const Sidebar = ({ candidate }) => {
+  console.log('c', candidate)
   return (
-    <div className={style.candidateSidebar}>
-      <div className={style.candidateSidebar__info}>
-        <img src={candidate.photo} alt="" />
-        { candidate && candidate.years_of_exp && <>
-          <p className={style.candidateSidebar__info__e}>Опыт работы</p>
-          <p className={style.candidateSidebar__info__y}>{getYearsString(candidate.years_of_exp)}</p>
-        </> }
-            <Link to={`/candidate/${candidate.id}/form`}>
-          <button className={style.candidateSidebar__info__btn}>Выбрать к собеседованию</button>
+    <div className='candidateSidebar'>
+      <div className='candidateSidebar__info'>
+        <img src={candidate.photo} alt='' />
+        {candidate && candidate.years_of_exp && (
+          <>
+            <p className='candidateSidebar__experience-title'>Опыт работы</p>
+            <p className='candidateSidebar__experience'>
+              {getYearsString(candidate.years_of_exp)}
+            </p>
+          </>
+        )}
+        <Link to={`/candidate/${candidate.id}/form`}>
+          <button className='candidateSidebar__select'>
+            Выбрать к собеседованию
+          </button>
         </Link>
+        <div className='candidateSidebar__achievements'>
+          {candidate &&
+            candidate.achievements &&
+            candidate.achievements.map((item) => {
+              return <Achievement achievement={item.achievement} />
+            })}
+        </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default Sidebar;
+export default Sidebar

src/components/Sidebar/sidebar.scss

@@ -6,6 +6,14 @@
   border-bottom: none !important;
   position: sticky;
   top: 80px;
+
+  &__achievements {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    padding: 0 1rem;
+    margin-bottom: 80px;
+  }
 }
 
 .candidateSidebar__info {
@@ -25,7 +33,7 @@
   border-radius: 100px;
 }
 
-.candidateSidebar__info__e {
+.candidateSidebar__experience-title {
   font-family: 'GT Eesti Pro Display';
   font-size: 1.8em;
   font-weight: normal;
@@ -35,7 +43,7 @@
   margin-top: 20px;
 }
 
-.candidateSidebar__info__y {
+.candidateSidebar__experience {
   font-family: 'GT Eesti Pro Display';
   font-size: 3em;
   font-weight: 700;
@@ -44,7 +52,7 @@
   line-height: normal;
 }
 
-.candidateSidebar__info__btn {
+.candidateSidebar__select {
   width: 280px;
   height: 60px;
   border-radius: 100px;
@@ -58,10 +66,10 @@
   line-height: normal;
   text-align: center;
   margin-top: 20px;
-  margin-bottom: 120px;
+  margin-bottom: 40px;
 }
 
-.candidateSidebar__info__btn:hover {
+.candidateSidebar__select:hover {
   background: rgba(0, 0, 0, 0);
   color: #73c141;
   box-shadow: inset 0 0 0 3px #73c141;
@@ -142,7 +150,8 @@
     flex-direction: column;
   }
 
-  .candidateSidebar__info__e, .candidateSidebar__info__y {
+  .candidateSidebar__info__e,
+  .candidateSidebar__info__y {
     width: 180px;
   }
 }