From 5cd15520be41fe8a062e329b6c7c0c9ac32be27d Mon Sep 17 00:00:00 2001 From: Samus Dimitriy Date: Fri, 15 Sep 2023 19:17:45 +0200 Subject: [PATCH] Feat(Dashboard) Added new functionality --- .../DashboardItem/DashboardItem.jsx | 22 +++++++ .../DashboardItem/DashboardItem.styled.jsx | 44 +++++++++++++ .../DashboardItemBig/DashboardItemBig.jsx | 14 +++++ .../DashboardItemBig.styled.jsx | 14 +++++ .../Diary/DayDashboard/DayDashboard.jsx | 37 ++++++++++- .../DayDashboard/DayDashboard.styled.jsx | 20 ++++++ .../Diary/DayExercises/DayExercises.jsx | 25 +++++++- .../Diary/DayProducts/DayProducts.jsx | 25 +++++++- .../Diary/DayProducts/DayProducts.styled.jsx | 61 +++++++++++++++++++ src/components/Diary/DaySwitch/DaySwitch.jsx | 7 ++- .../Diary/DaySwitch/DaySwitch.styled.jsx | 21 +++++-- src/pages/DiaryPage/DiaryPage.jsx | 22 ++++--- src/pages/DiaryPage/DiaryPage.styled.jsx | 16 ++++- src/styles/globalStyles.jsx | 6 ++ 14 files changed, 311 insertions(+), 23 deletions(-) create mode 100644 src/components/DashboardItemBig/DashboardItemBig.jsx create mode 100644 src/components/DashboardItemBig/DashboardItemBig.styled.jsx diff --git a/src/components/DashboardItem/DashboardItem.jsx b/src/components/DashboardItem/DashboardItem.jsx index e69de29..95237f9 100644 --- a/src/components/DashboardItem/DashboardItem.jsx +++ b/src/components/DashboardItem/DashboardItem.jsx @@ -0,0 +1,22 @@ +import PropTypes from 'prop-types'; + +import { Title, Value, Container, Wrapper } from './DashboardItem.styled'; +import Icon from '../Icon/Icon'; +const DashboardItem = ({ color, iconId }) => { + return ( + + + + Daily calorie intake + + 2200 + + ); +}; + +DashboardItem.propTypes = { + color: PropTypes.string.isRequired, + iconId: PropTypes.string.isRequired, +}; + +export default DashboardItem; diff --git a/src/components/DashboardItem/DashboardItem.styled.jsx b/src/components/DashboardItem/DashboardItem.styled.jsx index e69de29..aa50a7f 100644 --- a/src/components/DashboardItem/DashboardItem.styled.jsx +++ b/src/components/DashboardItem/DashboardItem.styled.jsx @@ -0,0 +1,44 @@ +import styled from 'styled-components'; + +const Container = styled.div` + display: flex; + flex-direction: column; + width: 187px; + height: 116px; + padding: 16px; + align-items: flex-start; + gap: 8px; + flex-shrink: 0; + border-radius: 12px; + border: 1px solid rgba(239, 237, 232, 0.2); + background-color: ${({ color }) => color}; +`; + +const Wrapper = styled.div` + display: flex; + align-items: center; + gap: 8px; +`; + +const Title = styled.h3` + color: rgba(239, 237, 232, 0.8); + font-feature-settings: + 'clig' off, + 'liga' off; + font-family: Roboto; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 18px; +`; + +const Value = styled.p` + color: #efede8; + font-family: Roboto; + font-size: 24px; + font-weight: 700; + line-height: 32px; + margin-top: auto; +`; + +export { Container, Title, Value, Wrapper }; diff --git a/src/components/DashboardItemBig/DashboardItemBig.jsx b/src/components/DashboardItemBig/DashboardItemBig.jsx new file mode 100644 index 0000000..0b6c0e7 --- /dev/null +++ b/src/components/DashboardItemBig/DashboardItemBig.jsx @@ -0,0 +1,14 @@ +import DayProducts from '../Diary/DayProducts/DayProducts'; +import DayExercises from '../Diary/DayExercises/DayExercises'; +import { Wrapper } from './DashboardItemBig.styled'; + +const DashboardItemBig = () => { + return ( + + + + + ); +}; + +export default DashboardItemBig; diff --git a/src/components/DashboardItemBig/DashboardItemBig.styled.jsx b/src/components/DashboardItemBig/DashboardItemBig.styled.jsx new file mode 100644 index 0000000..da993f6 --- /dev/null +++ b/src/components/DashboardItemBig/DashboardItemBig.styled.jsx @@ -0,0 +1,14 @@ +import styled from 'styled-components'; + +const Wrapper = styled.div` + position: relative; + display: flex; + flex-direction: column; + align-items: center; + min-width: 826px; + height: auto; + margin-right: 32px; + gap: 32px; +`; + +export { Wrapper }; diff --git a/src/components/Diary/DayDashboard/DayDashboard.jsx b/src/components/Diary/DayDashboard/DayDashboard.jsx index 84d6414..2f882ea 100644 --- a/src/components/Diary/DayDashboard/DayDashboard.jsx +++ b/src/components/Diary/DayDashboard/DayDashboard.jsx @@ -1,3 +1,38 @@ -const DayDashboard = () => {}; +import DashboardItem from '../../DashboardItem/DashboardItem'; +import Icon from '../../Icon/Icon'; +import { Grid, GridItem, Wrapper } from './DayDashboard.styled'; + +const icons = [ + 'icon-apple', + 'icon-fork-knife', + 'icon-dumbbell', + 'icon-running-figure', + 'icon-fire', + 'icon-pause-square', +]; + +const DayDashboard = () => { + return ( + + + {icons.map((iconId, index) => { + const color = index < 2 ? '#E6533C' : 'rgba(239, 237, 232, 0.05)'; + return ( + + + + ); + })} + +
+ + + Record all your meals in a calorie diary every day. This will help me + be aware of my nutrition and make me responsible for my choices. + +
+ + ); +}; export default DayDashboard; diff --git a/src/components/Diary/DayDashboard/DayDashboard.styled.jsx b/src/components/Diary/DayDashboard/DayDashboard.styled.jsx index e69de29..0209505 100644 --- a/src/components/Diary/DayDashboard/DayDashboard.styled.jsx +++ b/src/components/Diary/DayDashboard/DayDashboard.styled.jsx @@ -0,0 +1,20 @@ +import styled from 'styled-components'; + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +`; + +const Grid = styled.div` + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 16px; +`; + +const GridItem = styled.div` + width: 100%; +`; + +export { Wrapper, Grid, GridItem }; diff --git a/src/components/Diary/DayExercises/DayExercises.jsx b/src/components/Diary/DayExercises/DayExercises.jsx index 359539e..59d02cf 100644 --- a/src/components/Diary/DayExercises/DayExercises.jsx +++ b/src/components/Diary/DayExercises/DayExercises.jsx @@ -1,3 +1,26 @@ -const DayExercises = () => {}; +import Icon from '../../Icon/Icon'; +import { + Wrapper, + Title, + AddBtn, + DefaultText, + WrapperTitleBtn, +} from '../DayProducts/DayProducts.styled'; + +const DayExercises = () => { + return ( + + + Exercises + + Add product + + + + + Not found products + + ); +}; export default DayExercises; diff --git a/src/components/Diary/DayProducts/DayProducts.jsx b/src/components/Diary/DayProducts/DayProducts.jsx index 5fcd65d..df0163e 100644 --- a/src/components/Diary/DayProducts/DayProducts.jsx +++ b/src/components/Diary/DayProducts/DayProducts.jsx @@ -1,3 +1,26 @@ -const DayProducts = () => {}; +import Icon from '../../Icon/Icon'; +import { + Wrapper, + Title, + AddBtn, + DefaultText, + WrapperTitleBtn, +} from './DayProducts.styled'; + +const DayProducts = () => { + return ( + + + Products + + Add product + + + + + Not found products + + ); +}; export default DayProducts; diff --git a/src/components/Diary/DayProducts/DayProducts.styled.jsx b/src/components/Diary/DayProducts/DayProducts.styled.jsx index e69de29..f599b6f 100644 --- a/src/components/Diary/DayProducts/DayProducts.styled.jsx +++ b/src/components/Diary/DayProducts/DayProducts.styled.jsx @@ -0,0 +1,61 @@ +import styled from 'styled-components'; + +const Wrapper = styled.div` + position: relative; + align-items: center; + justify-content: center; + width: 100%; + min-height: 194px; + border-radius: 12px; + border: 1px solid rgba(239, 237, 232, 0.2); + background: rgba(239, 237, 232, 0.05); + padding: 16px; +`; + +const WrapperTitleBtn = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + margin-bottom: 16px; +`; + +const Title = styled.h3` + color: rgba(239, 237, 232, 0.5); + font-family: Roboto; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 18px; +`; + +const AddBtn = styled.button` + display: flex; + align-items: center; + gap: 8px; + margin-left: auto; + padding: 0; + background-color: transparent; + color: #e6533c; + font-family: Roboto; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; +`; + +const DefaultText = styled.p` + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + + color: rgba(239, 237, 232, 0.3); + font-family: Roboto; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; +`; + +export { Wrapper, Title, AddBtn, DefaultText, WrapperTitleBtn }; diff --git a/src/components/Diary/DaySwitch/DaySwitch.jsx b/src/components/Diary/DaySwitch/DaySwitch.jsx index 3fe6f86..cf01799 100644 --- a/src/components/Diary/DaySwitch/DaySwitch.jsx +++ b/src/components/Diary/DaySwitch/DaySwitch.jsx @@ -2,9 +2,8 @@ import { useState } from 'react'; import { Wrap, DateLabel, - CalenderIcon, + CalenderBtn, BtnPrev, - DayChangeIcon, BtnNext, } from './DaySwitch.styled'; import Icon from '../../Icon/Icon'; @@ -34,7 +33,9 @@ const DaySwitch = () => { return ( {formattedDate} - + + + diff --git a/src/components/Diary/DaySwitch/DaySwitch.styled.jsx b/src/components/Diary/DaySwitch/DaySwitch.styled.jsx index f6e4a1d..2777ff5 100644 --- a/src/components/Diary/DaySwitch/DaySwitch.styled.jsx +++ b/src/components/Diary/DaySwitch/DaySwitch.styled.jsx @@ -3,10 +3,14 @@ import styled from 'styled-components'; const Wrap = styled.div` display: flex; align-items: center; + justify-content: center; margin-left: auto; `; const DateLabel = styled.p` + display: flex; + align-items: center; + justify-content: center; color: #efede8; font-family: Roboto; font-size: 24px; @@ -15,15 +19,20 @@ const DateLabel = styled.p` line-height: 32px; `; -const CalenderIcon = styled.svg` +const CalenderBtn = styled.button` width: 24px; height: 24px; + margin: 0 40px 0 8px; + display: flex; + padding: 0; + background-color: transparent; + /* border: 3px solid transparent; */ `; const BtnPrev = styled.button` width: 16px; height: 16px; - flex-shrink: 0; + display: flex; margin: 0; padding: 0; background-color: transparent; @@ -33,9 +42,13 @@ const BtnPrev = styled.button` const BtnNext = styled.button` width: 16px; height: 16px; - flex-shrink: 0; + display: flex; + margin: 0; + padding: 0; + background-color: transparent; + color: white; `; const DayChangeIcon = styled.svg``; -export { Wrap, DateLabel, CalenderIcon, BtnPrev, BtnNext, DayChangeIcon }; +export { Wrap, DateLabel, CalenderBtn, BtnPrev, BtnNext, DayChangeIcon }; diff --git a/src/pages/DiaryPage/DiaryPage.jsx b/src/pages/DiaryPage/DiaryPage.jsx index 902eaf4..eb013cc 100644 --- a/src/pages/DiaryPage/DiaryPage.jsx +++ b/src/pages/DiaryPage/DiaryPage.jsx @@ -1,18 +1,20 @@ import DaySwitch from '../../components/Diary/DaySwitch/DaySwitch'; -import DayProducts from '../../components/Diary/DayProducts/DayProducts'; -import DayExercises from '../../components/Diary/DayExercises/DayExercises'; +import DashboardItemBig from '../../components/DashboardItemBig/DashboardItemBig'; import DayDashboard from '../../components/Diary/DayDashboard/DayDashboard'; -import { DiaryTitle, Wrapper } from './DiaryPage.styled'; +import { DiaryTitle, WrapperAll, WrapTitleDate } from './DiaryPage.styled'; const DiaryPage = () => { return ( - - Diary - - - - - + + + Diary + + + + + + + ); }; diff --git a/src/pages/DiaryPage/DiaryPage.styled.jsx b/src/pages/DiaryPage/DiaryPage.styled.jsx index 6deba27..e4cd2cc 100644 --- a/src/pages/DiaryPage/DiaryPage.styled.jsx +++ b/src/pages/DiaryPage/DiaryPage.styled.jsx @@ -1,13 +1,23 @@ import styled from 'styled-components'; -const Wrapper = styled.div` +const WrapperAll = styled.div` display: flex; + flex-direction: column; padding: 52px 96px 68px; background: #040404; + width: 1440px; + margin: 0 auto; + min-height: 100vh; +`; + +const WrapTitleDate = styled.div` + display: flex; `; const DiaryTitle = styled.h2` - padding-top: 20px; + margin: 72px auto 32px 0; + line-height: 44px; + font-size: 32px; `; -export { Wrapper, DiaryTitle }; +export { WrapperAll, DiaryTitle, WrapTitleDate }; diff --git a/src/styles/globalStyles.jsx b/src/styles/globalStyles.jsx index c6c96bb..10a4f6a 100644 --- a/src/styles/globalStyles.jsx +++ b/src/styles/globalStyles.jsx @@ -72,6 +72,12 @@ h6 { padding: 0; } +h2{ + font-family: 'RobotoBold', sans-serif; + color: #EFEDE8; + +} + img { display: block; max-width: 100%;