diff --git a/src/images/archiveTracker.svg b/src/images/archiveTracker.svg new file mode 100644 index 00000000..3fe42b23 --- /dev/null +++ b/src/images/archiveTracker.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/trackerProject.svg b/src/images/trackerProject.svg new file mode 100644 index 00000000..3cace50e --- /dev/null +++ b/src/images/trackerProject.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/trackerTasks.svg b/src/images/trackerTasks.svg new file mode 100644 index 00000000..383b85d0 --- /dev/null +++ b/src/images/trackerTasks.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index a25b4a3d..9294da2b 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -1,11 +1,76 @@ -import React from 'react'; +import React, {useState} from 'react'; 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 = () => { + + const [toggleTab, setToggleTab] = useState(1) + const [projects] = useState([ + { + name: 'Разработка трекера', + count: 4 + }, + { + name: 'Кинотеатр', + count: 4 + }, + { + name: 'Проект страхование', + count: 4 + } + ]) + + const toggleTabs = (index) => { + setToggleTab(index) + } return ( -
+
+
+
+

Трекер

+
+
+
toggleTabs(1)}> + img +

Проекты

+
+
toggleTabs(2)}> + img +

Задачи

+
+
toggleTabs(3)}> + img +

Архив

+
+
+
+
+ {projects.map((project, index) => { + return
+

{project.name}

+
+

Открытые задачи

+ {project.count} + + +
+
+ }) + } + +
+
+
+
+
+
) }; diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss new file mode 100644 index 00000000..6a9943d0 --- /dev/null +++ b/src/pages/Tracker/tracker.scss @@ -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; + } + } + } +}