apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed route

Browse Source
This commit is contained in:
Hope87 2021-06-02 18:25:25 +03:00
parent 778a4f6937
commit 105e2a78e2
9 changed files with 63 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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
View File

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

2
src/App.js
View File

@ -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';

6
src/components/Candidate/Candidate.js
View File

@ -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>

10
src/components/Description/Description.js
View File

@ -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>

26
src/components/Home/Home.js
View File

@ -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} />
</>
);
};

21
src/components/Outstaffing/Outstaffing.js
View File

@ -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>

12
src/components/Outstaffing/Outstaffing.module.css
View File

@ -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;

14
src/components/Outstaffing/OutstaffingBlock.js
View File

@ -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>
);
};