add mobile page
This commit is contained in:
Hope87
@ -1,40 +1,11 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import style from './Outstaffing.module.css';
|
||||
import front from '../../images/front_end.png';
|
||||
import back from '../../images/back_end.png';
|
||||
import design from '../../images/design.png';
|
||||
import OutstaffingBlock from './OutstaffingBlock';
|
||||
import TagSelect from '../Select/TagSelect';
|
||||
|
||||
const Outstaffing = ({ onhandleTabBar }) => {
|
||||
const [data, setData] = useState([]);
|
||||
const Outstaffing = ({ onhandleTabBar, selected, tabs }) => {
|
||||
const [selectedItems, setSelectedItems] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
const tags = [
|
||||
{
|
||||
name: 'frontend',
|
||||
img: front,
|
||||
header: '# Популярный стек',
|
||||
tags: ['Vue.js', 'ReactJS', 'Angular', 'JavaScript', 'Html', 'Css', 'MobX'],
|
||||
},
|
||||
{
|
||||
name: 'backend',
|
||||
img: back,
|
||||
header: '# Популярный стек',
|
||||
tags: ['Node.js', 'Express', 'Php', 'Ruby on Rails', 'Python', 'Wordpress', ' Java'],
|
||||
},
|
||||
{
|
||||
name: 'design',
|
||||
img: design,
|
||||
header: '# Популярный стек',
|
||||
tags: ['Figma', 'Avocode', 'PhotoShop', 'Xara', 'Pinegrow', 'Macaw', 'KompoZer'],
|
||||
},
|
||||
];
|
||||
|
||||
setData(tags);
|
||||
}, []);
|
||||
|
||||
const handleBlockClick = (item) => {
|
||||
if (!selectedItems.find((el) => item === el.value)) {
|
||||
setSelectedItems([...selectedItems, { value: item, label: item }]);
|
||||
@ -67,32 +38,35 @@ const Outstaffing = ({ onhandleTabBar }) => {
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-4">
|
||||
<div className="col-12 col-xl-4">
|
||||
<OutstaffingBlock
|
||||
data={data.find((item) => item.name === 'frontend')}
|
||||
data={tabs.find((item) => item.name === 'Frontend')}
|
||||
onClick={(item) => handleBlockClick(item)}
|
||||
onClickhandleTabBar={(name) => onhandleTabBar(name)}
|
||||
onTabBarClick={(name) => onhandleTabBar(name)}
|
||||
selected={selected === 'Frontend'}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-4">
|
||||
<div className="col-12 col-xl-4">
|
||||
<OutstaffingBlock
|
||||
data={data.find((item) => item.name === 'backend')}
|
||||
data={tabs.find((item) => item.name === 'Backend')}
|
||||
onClick={(item) => handleBlockClick(item)}
|
||||
onClickhandleTabBar={(name) => onhandleTabBar(name)}
|
||||
onTabBarClick={(name) => onhandleTabBar(name)}
|
||||
selected={selected === 'Backend'}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-4">
|
||||
<div className="col-12 col-xl-4">
|
||||
<OutstaffingBlock
|
||||
data={data.find((item) => item.name === 'design')}
|
||||
data={tabs.find((item) => item.name === 'Design')}
|
||||
onClick={(item) => handleBlockClick(item)}
|
||||
onClickhandleTabBar={(name) => onhandleTabBar(name)}
|
||||
onTabBarClick={(name) => onhandleTabBar(name)}
|
||||
selected={selected === 'Design'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<TagSelect
|
||||
options={data}
|
||||
options={tabs}
|
||||
selectedItems={selectedItems}
|
||||
tagSubmit={handleSubmit}
|
||||
setSelectedItems={setSelectedItems}
|
||||
|
||||
@ -1,66 +1,123 @@
|
||||
|
||||
.outstaffing__title {
|
||||
margin-top: 60px;
|
||||
}
|
||||
.outstaffing__title > h2 {
|
||||
text-align: center;
|
||||
color: #52b709;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 5em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 77.81px;
|
||||
}
|
||||
.outstaffing__title > h2 > span {
|
||||
color: #282828 ;
|
||||
font-style: normal ;
|
||||
letter-spacing: 0.56px ;
|
||||
line-height: normal ;
|
||||
}
|
||||
.outstaffing__box {
|
||||
margin-top: 120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.outstaffing__box > img {
|
||||
max-width: 240px;
|
||||
min-height: 120px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.outstaffing__box > p{
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.2em;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 0;
|
||||
/* margin-left: 40px; */
|
||||
}
|
||||
|
||||
.outstaffing__box > ul{
|
||||
padding-left: 0;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.items > li {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
.outstaffing__title {
|
||||
margin-top: 60px;
|
||||
}
|
||||
.outstaffing__title > h2 {
|
||||
text-align: center;
|
||||
color: #52b709;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 5em;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 77.81px;
|
||||
}
|
||||
|
||||
@media (max-width: 375.98px) {
|
||||
.outstaffing__title > h2 {
|
||||
font-size: 4.5em;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 376px) {
|
||||
.outstaffing__title > h2 {
|
||||
font-size: 5em;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.outstaffing__title > h2 > span {
|
||||
color: #282828;
|
||||
font-style: normal;
|
||||
letter-spacing: 0.56px;
|
||||
line-height: normal;
|
||||
}
|
||||
.outstaffing__box {
|
||||
margin-top: 120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.outstaffing__box {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.outstaffing__box__img {
|
||||
min-width: 260px;
|
||||
min-height: 120px;
|
||||
cursor: pointer;
|
||||
/* border: 2px solid #cdeaba; */
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.outstaffing__box__img > h3 {
|
||||
position: absolute;
|
||||
right: 25%;
|
||||
top: 40%;
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.outstaffing__box__img > img {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.outstaffing__box > div {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.outstaffing__box > p {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.2em;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.front {
|
||||
left: -5%;
|
||||
}
|
||||
|
||||
.back {
|
||||
top: 11%;
|
||||
left: -9%;
|
||||
}
|
||||
|
||||
.des {
|
||||
top: 24%;
|
||||
left: -9%;
|
||||
}
|
||||
|
||||
.outstaffing__box > div > ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 2px solid #cdeaba;
|
||||
}
|
||||
|
||||
.items > li {
|
||||
font-family: 'GT Eesti Pro Display';
|
||||
font-size: 1.8em;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -1,21 +1,39 @@
|
||||
import React from 'react';
|
||||
import style from './Outstaffing.module.css';
|
||||
|
||||
const OutstaffingBlock = ({ data = {}, onClick, onClickhandleTabBar }) => {
|
||||
const { img, header, tags, name } = data;
|
||||
const OutstaffingBlock = ({ data = {}, onClick, onTabBarClick, selected }) => {
|
||||
const { img, text, tags, name, header } = data;
|
||||
let clas;
|
||||
|
||||
if (name === 'Backend') {
|
||||
clas = style.back;
|
||||
} else if (name === 'Design') {
|
||||
clas = style.des;
|
||||
} else if (name === 'Frontend') {
|
||||
clas = style.front;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={style.outstaffing__box}>
|
||||
<img onClick={() => onClickhandleTabBar(name)} src={img} alt="img" />
|
||||
<p>{header}</p>
|
||||
{tags && (
|
||||
<ul className={style.items}>
|
||||
{tags.map((item) => (
|
||||
<li key={item} onClick={() => onClick(item)}>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
<div
|
||||
className={`${style.outstaffing__box__img} ${selected ? style.border : null}`}
|
||||
onClick={() => onTabBarClick(name)}
|
||||
>
|
||||
<h3>{header}</h3>
|
||||
<img className={clas} src={img} alt="img" />
|
||||
</div>
|
||||
<div>
|
||||
<p>{text}</p>
|
||||
{tags && (
|
||||
<ul className={style.items}>
|
||||
{tags.map((item) => (
|
||||
<li key={item} onClick={() => onClick(item)}>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user