reports create, refactoring

src/components/SkillSection/SkillSection.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import './skillSection.scss'
+
+const SkillSection = ({ skillsArr }) => {
+  return (
+    <div className='skill-section'>
+      <h3>Навыки:</h3>
+      <ul>
+        {skillsArr &&
+          skillsArr.map((skills) => (
+            <li key={skills.id}>{skills.skill.name}</li>
+          ))}
+      </ul>
+    </div>
+  )
+}
+
+export default SkillSection

src/components/SkillSection/skillSection.scss

@@ -0,0 +1,42 @@
+.skill-section {
+  display: flex;
+  border: 1px solid #69bf2c;
+  padding: 28px 40px 16px 30px;
+  margin-top: 60px;
+  border-radius: 10px;
+  margin-bottom: 60px;
+
+  h3 {
+    font-family: 'GT Eesti Pro Display';
+    font-size: 1.8em;
+    font-weight: 700;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 28px;
+    text-align: left;
+  }
+
+  ul {
+    list-style: none;
+    display: flex;
+    padding-left: 0;
+    flex-wrap: wrap;
+
+    li {
+      font-family: 'GT Eesti Pro Display';
+      font-size: 1.8em;
+      font-weight: 100;
+      font-style: normal;
+      letter-spacing: normal;
+      line-height: 28px;
+      text-align: left;
+      margin-left: 20px;
+    }
+  }
+}
+
+@media (max-width: 575.98px) {
+  .skill-section {
+    display: none;
+  }
+}