tracker
This commit is contained in:
parent
fceaa1d190
commit
6d113852c4
3
src/images/archiveTracker.svg
Normal file
3
src/images/archiveTracker.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M7 13.7475L6.94961 13.7181L1.32757 10.4386L7 13.7475ZM7 13.7475L7.05039 13.7181L12.6725 10.4385C12.8214 10.3517 12.9987 10.3276 13.1654 10.3714C13.3321 10.4153 13.4746 10.5236 13.5614 10.6725C13.6045 10.7462 13.6325 10.8277 13.644 10.9123C13.6556 10.9968 13.6503 11.0829 13.6286 11.1654C13.6069 11.248 13.5691 11.3254 13.5174 11.3934C13.4658 11.4613 13.4012 11.5184 13.3275 11.5614L7.32751 15.0614L7.37521 15.1432M7 13.7475L7.37521 15.1432M7.37521 15.1432L7.32751 15.0614C7.2281 15.1194 7.11508 15.15 7 15.15C6.88492 15.15 6.7719 15.1194 6.67249 15.0614L6.62466 15.1434M7.37521 15.1432L6.62466 15.1434M6.62466 15.1434L6.67249 15.0614L0.672541 11.5615M6.62466 15.1434L0.672541 11.5615M7 10.7475L6.94961 10.7181L1.32757 7.43858L7 10.7475ZM7 10.7475L7.05039 10.7181M7 10.7475L7.05039 10.7181M7.05039 10.7181L12.6725 7.43855L12.6221 7.35217M7.05039 10.7181L12.6221 7.35217M12.6221 7.35217L12.6725 7.43852C12.7463 7.39545 12.8278 7.36732 12.9124 7.35576C12.997 7.3442 13.083 7.34942 13.1656 7.37112C13.2482 7.39283 13.3257 7.43059 13.3937 7.48226C13.4617 7.53393 13.5188 7.59849 13.5618 7.67225C13.6049 7.74601 13.6329 7.82753 13.6445 7.91214C13.656 7.99675 13.6507 8.0828 13.6289 8.16538C13.6072 8.24795 13.5694 8.32543 13.5177 8.39338C13.4659 8.46134 13.4014 8.51843 13.3276 8.56142L13.3275 8.56145L7.32751 12.0614L7.3779 12.1478L7.32751 12.0614C7.2281 12.1194 7.11508 12.15 7 12.15C6.88492 12.15 6.7719 12.1194 6.67249 12.0614L6.62466 12.1434L6.67249 12.0614L0.672541 8.56148L12.6221 7.35217ZM0.672541 11.5615L0.672488 11.5614C0.523724 11.4745 0.415556 11.3321 0.371759 11.1655C0.327956 10.9988 0.352125 10.8216 0.438951 10.6727C0.525778 10.5239 0.668156 10.4156 0.834788 10.3717C1.0014 10.3278 1.17862 10.3518 1.32751 10.4385L0.672541 11.5615ZM0.672482 4.43855L0.672488 4.43855L6.67249 0.938551L6.67249 0.938549C6.7719 0.880558 6.88492 0.85 7 0.85C7.11508 0.85 7.2281 0.880558 7.32751 0.938549L7.32751 0.938551L13.3275 4.43855L13.3765 4.35454L13.3275 4.43855C13.4256 4.49579 13.5071 4.57775 13.5636 4.67626C13.6202 4.77477 13.65 4.88639 13.65 5C13.65 5.1136 13.6202 5.22522 13.5636 5.32373C13.5071 5.42225 13.4256 5.50421 13.3275 5.56145L13.3752 5.64321L13.3275 5.56145L7.32751 9.06145L7.3779 9.14782L7.32751 9.06145C7.2281 9.11944 7.11508 9.15 7 9.15C6.88492 9.15 6.7719 9.11944 6.67249 9.06145L6.62734 9.13884L6.67249 9.06145L0.672488 5.56145L0.672482 5.56144C0.574349 5.50421 0.492933 5.42225 0.436351 5.32374C0.379768 5.22523 0.349995 5.11361 0.35 5L0.25 5L0.35 4.99999C0.349995 4.88639 0.379768 4.77477 0.436351 4.67626C0.492933 4.57775 0.574349 4.49579 0.672482 4.43855ZM2.43808 4.91362L2.29 5L2.43808 5.08638L6.94961 7.71809L7 7.74748L7.05039 7.71809L11.5619 5.08638L11.71 5L11.5619 4.91362L7.05039 2.28191L7 2.25252L6.94961 2.28191L2.43808 4.91362ZM0.834788 7.37169C1.0014 7.32779 1.17862 7.35184 1.32751 7.43855L0.672488 8.56145C0.523724 8.47452 0.415556 8.33209 0.371759 8.16545C0.327956 7.9988 0.352125 7.82156 0.438951 7.67272C0.525778 7.52387 0.668156 7.4156 0.834788 7.37169Z" fill="#787486" stroke="white" stroke-width="0.2"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.1 KiB |
5
src/images/trackerProject.svg
Normal file
5
src/images/trackerProject.svg
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M11.5774 0.722229H0.422689C0.189009 0.722229 0 0.911336 0 1.14492V2.85501C0 3.08859 0.189009 3.27775 0.422689 3.27775H11.5774C11.811 3.27775 12 3.08859 12 2.85501V1.14492C12 0.911336 11.811 0.722229 11.5774 0.722229Z" fill="#787486"/>
|
||||||
|
<path d="M11.5774 4.72229H0.422689C0.189009 4.72229 0 4.91135 0 5.14493V6.85508C0 7.08871 0.189009 7.27776 0.422689 7.27776H11.5774C11.811 7.27776 12 7.08871 12 6.85508V5.14493C12 4.91135 11.811 4.72229 11.5774 4.72229Z" fill="#787486"/>
|
||||||
|
<path d="M5.5773 8.72229H0.422689C0.189009 8.72229 0 8.91137 0 9.14493V10.8551C0 11.0887 0.189009 11.2778 0.422689 11.2778H5.5773C5.81098 11.2778 5.99999 11.0887 5.99999 10.8551V9.14493C6.00001 8.91137 5.811 8.72229 5.5773 8.72229Z" fill="#787486"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 835 B |
3
src/images/trackerTasks.svg
Normal file
3
src/images/trackerTasks.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M11.1676 1C12.3229 1 13.2671 1.90421 13.3308 3.04365L13.3343 3.1666L13.3339 11.1691C13.3337 12.3657 12.3637 13.3358 11.1671 13.3358H3.1667C2.01134 13.3358 1.06717 12.4315 1.00343 11.2921L1 11.1692L1.0004 3.16661C1.00054 1.97006 1.97055 1 3.1671 1H11.1676ZM6.66667 5.66667L2 5.66733L2.00007 11.1691L2.00485 11.2763C2.05892 11.8704 2.55844 12.3358 3.16667 12.3358L6.66667 12.3353V5.66667ZM12.3333 9.66667L7.66667 9.66733V12.3353L11.1671 12.3358C11.8114 12.3358 12.3338 11.8134 12.3339 11.1691L12.3333 9.66667ZM11.1676 2L7.66667 1.99933V8.66733L12.3333 8.66667L12.3342 3.16665L12.3294 3.05949C12.2753 2.46537 11.7758 2 11.1676 2ZM6.66667 1.99933L3.16715 2L3.07149 2.00387C2.4719 2.05259 2.00047 2.5546 2.0004 3.16669L2 4.66733L6.66667 4.66667V1.99933Z" fill="#787486" stroke="#787486" stroke-width="0.3"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 915 B |
@ -1,11 +1,76 @@
|
|||||||
import React from 'react';
|
import React, {useState} from 'react';
|
||||||
|
|
||||||
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
|
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
|
||||||
|
import {Footer} from '../../components/Footer/Footer'
|
||||||
|
|
||||||
|
import project from '../../images/trackerProject.svg'
|
||||||
|
import tasks from '../../images/trackerTasks.svg'
|
||||||
|
import archive from '../../images/archiveTracker.svg'
|
||||||
|
|
||||||
|
import './tracker.scss'
|
||||||
|
|
||||||
export const Tracker = () => {
|
export const Tracker = () => {
|
||||||
|
|
||||||
|
const [toggleTab, setToggleTab] = useState(1)
|
||||||
|
const [projects] = useState([
|
||||||
|
{
|
||||||
|
name: 'Разработка трекера',
|
||||||
|
count: 4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Кинотеатр',
|
||||||
|
count: 4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Проект страхование',
|
||||||
|
count: 4
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const toggleTabs = (index) => {
|
||||||
|
setToggleTab(index)
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<div className='tacker'>
|
<div className='tracker'>
|
||||||
<ProfileHeader />
|
<ProfileHeader />
|
||||||
|
<div className='container'>
|
||||||
|
<div className='tracker__content'>
|
||||||
|
<h2 className='tracker__title'>Трекер</h2>
|
||||||
|
<div className='tracker__tabs'>
|
||||||
|
<div className='tracker__tabs__head'>
|
||||||
|
<div className={toggleTab === 1 ? 'tab active-tab' : 'tab'} onClick={() => toggleTabs(1)}>
|
||||||
|
<img src={project} alt='img' />
|
||||||
|
<p>Проекты </p>
|
||||||
|
</div>
|
||||||
|
<div className={toggleTab === 2 ? 'tab active-tab' : 'tab'} onClick={() => toggleTabs(2)}>
|
||||||
|
<img src={tasks} alt='img' />
|
||||||
|
<p>Задачи</p>
|
||||||
|
</div>
|
||||||
|
<div className={toggleTab === 3 ? 'tab active-tab' : 'tab'} onClick={() => toggleTabs(3)}>
|
||||||
|
<img src={archive} alt='img' />
|
||||||
|
<p>Архив</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='tracker__tabs__content'>
|
||||||
|
<div className={toggleTab === 1 ? 'tracker__tabs__content__projects active__content' : 'tracker__tabs__content__projects'}>
|
||||||
|
{projects.map((project, index) => {
|
||||||
|
return <div className='project'>
|
||||||
|
<h3>{project.name}</h3>
|
||||||
|
<div className='project__info'>
|
||||||
|
<p>Открытые задачи</p>
|
||||||
|
<span className='count'>{project.count}</span>
|
||||||
|
<span className='add'>+</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
<button><span>+</span>Создать проект</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Footer/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
};
|
};
|
||||||
|
|||||||
158
src/pages/Tracker/tracker.scss
Normal file
158
src/pages/Tracker/tracker.scss
Normal file
@ -0,0 +1,158 @@
|
|||||||
|
.tracker {
|
||||||
|
background: #F1F1F1;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
font-family: "LabGrotesque", sans-serif;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1160px;
|
||||||
|
padding: 0 10px;
|
||||||
|
|
||||||
|
@media (max-width: 570px) {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
margin-top: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 32px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tabs {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
&__head {
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
display: flex;
|
||||||
|
padding: 12px 40px 15px 19px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0 0 0 15px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 32px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active-tab {
|
||||||
|
background: white;
|
||||||
|
border-radius: 15px 0 0 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&__projects {
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 0 12px 12px 12px;
|
||||||
|
padding: 26px 24px 40px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
column-gap: 34px;
|
||||||
|
row-gap: 30px;
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.project {
|
||||||
|
width: 48%;
|
||||||
|
background: #F1F1F1;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 17px 26px 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 32px;
|
||||||
|
color: #111112;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #6F6F6F;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 24px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count {
|
||||||
|
margin-left: 8px;
|
||||||
|
width: 21px;
|
||||||
|
height: 24px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #DDDDDD;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: #6F6F6F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add {
|
||||||
|
color: #6F6F6F;
|
||||||
|
font-size: 17px;
|
||||||
|
margin: 0 25px 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: '...';
|
||||||
|
position: absolute;
|
||||||
|
font-size: 17px;
|
||||||
|
color: #6F6F6F;
|
||||||
|
right: 0;
|
||||||
|
top: -15%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: #52B709;
|
||||||
|
border-radius: 44px;
|
||||||
|
max-width: 150px;
|
||||||
|
height: 40px;
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 32px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin-right: 9px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active__content {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user