fixed route
This commit is contained in:
parent
778a4f6937
commit
105e2a78e2
@ -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",
|
||||
|
4
public/.htaccess
Normal file
4
public/.htaccess
Normal file
@ -0,0 +1,4 @@
|
||||
Options -MultiViews
|
||||
RewriteEngine On
|
||||
RewriteCond %{REQUEST_FILENAME} !-f
|
||||
RewriteRule ^ index.html [QSA,L]
|
@ -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';
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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}>
|
||||
{' '}
|
||||
JavaScript · Typescript · ReactJS · Vue.js · Redux · MobX · Storybook · Jest · Адаптивная верстка ·
|
||||
БЭМ
|
||||
</span>
|
||||
<span className={style.description__sp}> {el.tags}</span>
|
||||
<img className={style.description__rectangle} src={rectangle} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
@ -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} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
@ -14,18 +14,21 @@ const Outstaffing = () => {
|
||||
const tags = [
|
||||
{
|
||||
name: 'front',
|
||||
img: '../../images/front_end.png',
|
||||
tags: ['Vue.js', 'ReactJS', 'Angular', 'JavaScript', 'Html', 'Css'],
|
||||
img: front,
|
||||
header: '# Популярный стек',
|
||||
tags: ['Vue.js', 'ReactJS', 'Angular', 'JavaScript', 'Html', 'Css', 'MobX'],
|
||||
},
|
||||
{
|
||||
name: 'back',
|
||||
img: '../../images/back_end.png',
|
||||
tags: ['Ruby on Rails', 'Node.js', 'Express', 'Php', 'Python', 'Wordpress'],
|
||||
img: back,
|
||||
header: '# Популярный стек',
|
||||
tags: ['Node.js', 'Express', 'Php', 'Ruby on Rails', 'Python', 'Wordpress', ' Java'],
|
||||
},
|
||||
{
|
||||
name: 'design',
|
||||
img: '../../images/design.png',
|
||||
tags: ['Figma', 'Avocode', 'PhotoShop', 'Xara', 'Pinegrow', 'Macaw'],
|
||||
img: design,
|
||||
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>
|
||||
|
@ -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;
|
||||
|
@ -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" />
|
||||
<p>{text}</p>
|
||||
<img src={img} alt="img" />
|
||||
<p>{header}</p>
|
||||
{tags && (
|
||||
<ul className={style.items}>
|
||||
{data &&
|
||||
data.tags &&
|
||||
data.tags.length &&
|
||||
data.tags.map((item) => (
|
||||
{tags.map((item) => (
|
||||
<li key={item} onClick={() => onClick(item)}>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user