fixed route

package.json

@@ -2,6 +2,7 @@
   "name": "outstaffing",
   "version": "0.1.0",
   "private": true,
+  "homepage": "https://html.craft-group.xyz/outstaffing/",
   "dependencies": {
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.7",

public/.htaccess

@@ -0,0 +1,4 @@
+Options -MultiViews
+RewriteEngine On
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteRule ^ index.html [QSA,L]

src/App.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, Suspense, lazy } from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { HashRouter as Router, Route, Switch } from 'react-router-dom';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './fonts/stylesheet.css';
 

src/components/Candidate/Candidate.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 import style from './Candidate.module.css';
 import { candidatesList } from '../Home/Home';
-import icon from '../../images/front_end.png';
 import arrow from '../../images/right-arrow.png';
 import rectangle from '../../images/rectangle_secondPage.png';
 import Sidebar from '../Sidebar/Sidebar';
@@ -17,10 +16,11 @@ const Candidate = () => {
   const history = useHistory();
 
   const { id: candidateId } = useParams();
+  console.log('candidateId', candidateId);
 
   const currentCandidate = candidatesList.find((el) => el.id === Number(candidateId));
 
-  const { name } = currentCandidate;
+  const { name, img } = currentCandidate;
 
   return (
     <section className={style.candidate}>
@@ -44,7 +44,7 @@ const Candidate = () => {
               </div>
 
               <div className="icon">
-                <img src={icon} alt="" />
+                <img src={img} alt="" />
               </div>
             </div>
           </div>

src/components/Description/Description.js

@@ -6,12 +6,12 @@ import arrowLeft from '../../images/arrow_left.png';
 import arrowRight from '../../images/arrow_right.png';
 import { Link } from 'react-router-dom';
 
-const Description = ({ arr }) => {
+const Description = ({ candidatesListArr }) => {
   return (
     <section className={style.description}>
       <div className="container">
         <div className={style.description__wrapper}>
-          {arr.map((el) => (
+          {candidatesListArr.map((el) => (
             <div className="row" key={el.id}>
               <div className="col-2">
                 <img className={style.description__img} src={photo} alt="" />
@@ -30,11 +30,7 @@ const Description = ({ arr }) => {
                 </Link>
               </div>
               <div className="col-12">
-                <span className={style.description__sp}>
+                <span className={style.description__sp}> {el.tags}</span>
-                  {' '}
-                  JavaScript · Typescript · ReactJS · Vue.js · Redux · MobX · Storybook · Jest · Адаптивная верстка ·
-                  БЭМ
-                </span>
                 <img className={style.description__rectangle} src={rectangle} alt="" />
               </div>
             </div>

src/components/Home/Home.js

@@ -1,17 +1,37 @@
 import React from 'react';
 import Outstaffing from '../Outstaffing/Outstaffing';
 import Description from '../Description/Description';
+import front from '../../images/front_end.png';
+import back from '../../images/back_end.png';
+import design from '../../images/design.png';
 
 export const candidatesList = [
-  { id: 1, name: 'Frontend' },
+  {
-  { id: 2, name: 'Backend' },
+    id: 1,
+    name: 'Frontend',
+    img: front,
+    tags: 'JavaScript · Html · Css · Vue.js · ReactJS · Angular · MobX',
+  },
+
+  {
+    id: 2,
+    name: 'Backend',
+    img: back,
+    tags: 'Node.js · Express · Php · Ruby on Rails · Python · Wordpress · Java',
+  },
+  {
+    id: 3,
+    name: 'Design',
+    img: design,
+    tags: 'Figma · Avocode · PhotoShop · Xara · Pinegrow · Macaw · KompoZer',
+  },
 ];
 
 const Home = () => {
   return (
     <>
       <Outstaffing />
-      <Description arr={candidatesList} />
+      <Description candidatesListArr={candidatesList} />
     </>
   );
 };

src/components/Outstaffing/Outstaffing.js

@@ -14,18 +14,21 @@ const Outstaffing = () => {
     const tags = [
       {
         name: 'front',
-        img: '../../images/front_end.png',
+        img: front,
-        tags: ['Vue.js', 'ReactJS', 'Angular', 'JavaScript', 'Html', 'Css'],
+        header: '# Популярный стек',
+        tags: ['Vue.js', 'ReactJS', 'Angular', 'JavaScript', 'Html', 'Css', 'MobX'],
       },
       {
         name: 'back',
-        img: '../../images/back_end.png',
+        img: back,
-        tags: ['Ruby on Rails', 'Node.js', 'Express', 'Php', 'Python', 'Wordpress'],
+        header: '# Популярный стек',
+        tags: ['Node.js', 'Express', 'Php', 'Ruby on Rails', 'Python', 'Wordpress', ' Java'],
       },
       {
         name: 'design',
-        img: '../../images/design.png',
+        img: design,
-        tags: ['Figma', 'Avocode', 'PhotoShop', 'Xara', 'Pinegrow', 'Macaw'],
+        header: '# Популярный стек',
+        tags: ['Figma', 'Avocode', 'PhotoShop', 'Xara', 'Pinegrow', 'Macaw', 'KompoZer'],
       },
     ];
 
@@ -66,25 +69,19 @@ const Outstaffing = () => {
           <div className="row">
             <div className="col-4">
               <OutstaffingBlock
-                image={front}
                 data={data.find((item) => item.name === 'front')}
-                header={'# Популярный  стек'}
                 onClick={(item) => handleBlockClick(item)}
               />
             </div>
             <div className="col-4">
               <OutstaffingBlock
-                image={back}
                 data={data.find((item) => item.name === 'back')}
-                header={'# Популярный стек'}
                 onClick={(item) => handleBlockClick(item)}
               />
             </div>
             <div className="col-4">
               <OutstaffingBlock
-                image={design}
                 data={data.find((item) => item.name === 'design')}
-                header={'# Популярный стек'}
                 onClick={(item) => handleBlockClick(item)}
               />
             </div>

src/components/Outstaffing/Outstaffing.module.css

@@ -30,7 +30,7 @@
     max-height: 120px;
   }
 
-  .outstaffing__box > p {
+  .outstaffing__box > p{
     font-family: 'GT Eesti Pro Display';
     font-size: 1.2em;
     font-weight: 300;
@@ -40,9 +40,17 @@
     text-align: left;
     margin-top: 60px;
     margin-bottom: 0;
-    margin-left: 16px;
+    /* margin-left: 40px; */
   }
 
+  .outstaffing__box > ul{
+     padding-left: 0;
+
+  }
+
+
+ 
+
   .items > li {
     font-family: 'GT Eesti Pro Display - Thin';
     font-size: 1.8em;

src/components/Outstaffing/OutstaffingBlock.js

@@ -1,21 +1,21 @@
 import React from 'react';
 import style from './Outstaffing.module.css';
 
-const OutstaffingBlock = ({ text, image, data, onClick }) => {
+const OutstaffingBlock = ({ data = {}, onClick }) => {
+  const { img, header, tags } = data;
   return (
     <div className={style.outstaffing__box}>
-      <img src={image} alt="img" />
+      <img src={img} alt="img" />
-      <p>{text}</p>
+      <p>{header}</p>
+      {tags && (
         <ul className={style.items}>
-        {data &&
+          {tags.map((item) => (
-          data.tags &&
-          data.tags.length &&
-          data.tags.map((item) => (
             <li key={item} onClick={() => onClick(item)}>
               {item}
             </li>
           ))}
         </ul>
+      )}
     </div>
   );
 };