Fixed img in components

src/pages/Summary/Summary.js

@@ -1,122 +1,152 @@
-import React, {useEffect, useState} from 'react';
-import {useSelector} from "react-redux";
-import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
-import {getProfileInfo} from "../../redux/outstaffingSlice";
-import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
-import {Footer} from '../../components/Footer/Footer'
-import { urlForLocal} from "../../helper";
+import React, { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { Navigate } from "react-router-dom";
+
+import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
+import { getProfileInfo } from "../../redux/outstaffingSlice";
+import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
+import { Footer } from "../../components/Footer/Footer";
+import { urlForLocal } from "../../helper";
+import { apiRequest } from "../../api/request";
+import { Navigation } from "../../components/Navigation/Navigation";
 
 import arrow from "../../images/right-arrow.png";
-import rightArrow from "../../images/arrowRight.png"
-import gitImgItem from "../../images/gitItemImg.png"
+import rightArrow from "../../images/arrowRight.svg";
+import gitImgItem from "../../images/gitItemImg.svg";
 
-import {apiRequest} from "../../api/request";
-import {Navigate} from "react-router-dom";
-import { Navigation } from '../../components/Navigation/Navigation';
-
-import './summary.scss'
+import "./summary.scss";
 
 export const Summary = () => {
-    if(localStorage.getItem('role_status') === '18') {
-        return <Navigate to="/profile" replace/>
-    }
+  if (localStorage.getItem("role_status") === "18") {
+    return <Navigate to="/profile" replace />;
+  }
   const profileInfo = useSelector(getProfileInfo);
   const [openGit, setOpenGit] = useState(false);
   const [gitInfo, setGitInfo] = useState([]);
 
   useEffect(() => {
-    apiRequest(`/profile/portfolio-projects?card_id=${localStorage.getItem('cardId')}`)
-        .then(responseGit => setGitInfo(responseGit))
+    apiRequest(
+      `/profile/portfolio-projects?card_id=${localStorage.getItem("cardId")}`
+    ).then((responseGit) => setGitInfo(responseGit));
   }, []);
   return (
-      <div className='summary'>
-        <ProfileHeader/>
-        <Navigation />
-        <div className='container'>
-          <div className='summary__content'>
-              <ProfileBreadcrumbs links={[
-                  {name: 'Главная', link: '/profile'},
-                  {name: 'Данные и резюме', link: '/profile/summary'}
-              ]}
-              />
-            <h2 className='summary__title'>Ваше резюме {openGit && <span>- Git</span>}</h2>
-            {openGit && <div className='summary__back' onClick={() => setOpenGit(false)}>
-              <img src={arrow} alt='arrow'/>
+    <div className="summary">
+      <ProfileHeader />
+      <Navigation />
+      <div className="container">
+        <div className="summary__content">
+          <ProfileBreadcrumbs
+            links={[
+              { name: "Главная", link: "/profile" },
+              { name: "Данные и резюме", link: "/profile/summary" },
+            ]}
+          />
+          <h2 className="summary__title">
+            Ваше резюме {openGit && <span>- Git</span>}
+          </h2>
+          {openGit && (
+            <div className="summary__back" onClick={() => setOpenGit(false)}>
+              <img src={arrow} alt="arrow" />
               <p>Вернуться</p>
-            </div>}
-            <div className={openGit ? 'summary__info openGit' : 'summary__info'}>
-              <div className='summary__person'>
-                <img src={urlForLocal(profileInfo.photo)} className='summary__avatar' alt='avatar'/>
-                <p className='summary__name'>{profileInfo.fio}, {profileInfo.specification} разработчик</p>
-              </div>
-              {!openGit &&
-              <button className='summary__git' onClick={() => setOpenGit(true)}>Git</button>
-              }
             </div>
+          )}
+          <div className={openGit ? "summary__info openGit" : "summary__info"}>
+            <div className="summary__person">
+              <img
+                src={urlForLocal(profileInfo.photo)}
+                className="summary__avatar"
+                alt="avatar"
+              />
+              <p className="summary__name">
+                {profileInfo.fio}, {profileInfo.specification} разработчик
+              </p>
+            </div>
+            {!openGit && (
+              <button className="summary__git" onClick={() => setOpenGit(true)}>
+                Git
+              </button>
+            )}
           </div>
-          {!openGit &&
-          <div className='summary__skills skills__section'>
-            <div className='summary__sections__head'>
+        </div>
+        {!openGit && (
+          <div className="summary__skills skills__section">
+            <div className="summary__sections__head">
               <h3>Основной стек</h3>
               <button>Редактировать раздел</button>
             </div>
-            <div className='skills__section__items'>
-              <div className='skills__section__items__wrapper'>
-                {profileInfo.skillValues && profileInfo.skillValues.map((skill, index) =>
-                    <span key={skill.id} className='skill_item'>{skill.skill.name}
-                        {profileInfo.skillValues.length > index + 1 && ','}
+            <div className="skills__section__items">
+              <div className="skills__section__items__wrapper">
+                {profileInfo.skillValues &&
+                  profileInfo.skillValues.map((skill, index) => (
+                    <span key={skill.id} className="skill_item">
+                      {skill.skill.name}
+                      {profileInfo.skillValues.length > index + 1 && ","}
                     </span>
-                )}
+                  ))}
               </div>
             </div>
           </div>
-          }
-          {profileInfo.vc_text && !openGit &&
-          <div className='summary__experience'>
-            <div className='experience__block'>
+        )}
+        {profileInfo.vc_text && !openGit && (
+          <div className="summary__experience">
+            <div className="experience__block">
               <div className="summary__sections__head">
-                  <h3>Описание опыта работы</h3>
-                  <button>Редактировать раздел</button>
-              </div>
-              <div className="experience__content" dangerouslySetInnerHTML={{__html:profileInfo.vc_text}}>
+                <h3>Описание опыта работы</h3>
+                <button>Редактировать раздел</button>
               </div>
+              <div
+                className="experience__content"
+                dangerouslySetInnerHTML={{ __html: profileInfo.vc_text }}
+              ></div>
             </div>
           </div>
-          }
-          {openGit &&
-          <div className='summary__sectionGit'>
-            <div className='summary__sections__head'>
+        )}
+        {openGit && (
+          <div className="summary__sectionGit">
+            <div className="summary__sections__head">
               <h3>Страница портфолио кода разработчика</h3>
               <button>Редактировать раздел</button>
             </div>
-            <div className='summary__sectionGitItems'>
-              {Boolean(gitInfo.length) && gitInfo.map((itemGit) => {
-                return <a href={itemGit.link} target="_blank" rel="noreferrer" key={itemGit.id} className='summary__sectionGitItem gitItem'>
-                  <div className='gitItem__info'>
-                    <div className='gitItem__info__about'>
-                      <img src={gitImgItem} alt='gitImg'/>
-                      <div className='gitItem__info__name'>
-                        <h4>{itemGit.title}</h4>
-                        <p>{itemGit.description}</p>
+            <div className="summary__sectionGitItems">
+              {Boolean(gitInfo.length) &&
+                gitInfo.map((itemGit) => {
+                  return (
+                    <a
+                      href={itemGit.link}
+                      target="_blank"
+                      rel="noreferrer"
+                      key={itemGit.id}
+                      className="summary__sectionGitItem gitItem"
+                    >
+                      <div className="gitItem__info">
+                        <div className="gitItem__info__about">
+                          <img src={gitImgItem} alt="gitImg" />
+                          <div className="gitItem__info__name">
+                            <h4>{itemGit.title}</h4>
+                            <p>{itemGit.description}</p>
+                          </div>
+                        </div>
+                        <div className="gitItem__info__specification">
+                          <span className="gitItem__lineSkill" />
+                          <p>{itemGit.main_stack}</p>
+                        </div>
                       </div>
-                    </div>
-                    <div className='gitItem__info__specification'>
-                      <span className='gitItem__lineSkill'/>
-                      <p>{itemGit.main_stack}</p>
-                    </div>
-                  </div>
-                  <a className='gitItem__link' href={itemGit.link} target="_blank" rel="noreferrer">
-                    <img src={rightArrow} alt='arrowRight'/>
-                  </a>
-                </a>
-              })
-              }
+                      <a
+                        className="gitItem__link"
+                        href={itemGit.link}
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        <img src={rightArrow} alt="arrowRight" />
+                      </a>
+                    </a>
+                  );
+                })}
             </div>
           </div>
-          }
-        </div>
-        <Footer/>
+        )}
       </div>
-  )
+      <Footer />
+    </div>
+  );
 };
-