Merge pull request #7 from ViktorSvertoka/Dima-DiaryPage

Feat(Dashboard) Added new functionality

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 (
+    <Container color={color}>
+      <Wrapper>
+        <Icon symbolId={iconId} width="20" height="20" />
+        <Title>Daily calorie intake</Title>
+      </Wrapper>
+      <Value>2200</Value>
+    </Container>
+  );
+};
+
+DashboardItem.propTypes = {
+  color: PropTypes.string.isRequired,
+  iconId: PropTypes.string.isRequired,
+};
+
+export default DashboardItem;

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

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 (
+    <Wrapper>
+      <DayProducts></DayProducts>
+      <DayExercises></DayExercises>
+    </Wrapper>
+  );
+};
+
+export default DashboardItemBig;

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

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 (
+    <Wrapper>
+      <Grid>
+        {icons.map((iconId, index) => {
+          const color = index < 2 ? '#E6533C' : 'rgba(239, 237, 232, 0.05)';
+          return (
+            <GridItem key={index}>
+              <DashboardItem color={color} iconId={iconId} />
+            </GridItem>
+          );
+        })}
+      </Grid>
+      <div>
+        <Icon symbolId="icon-arrow-right" width="16" height="16" />
+        <span>
+          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.
+        </span>
+      </div>
+    </Wrapper>
+  );
+};
 
 export default DayDashboard;

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

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 (
+    <Wrapper>
+      <WrapperTitleBtn>
+        <Title>Exercises</Title>
+        <AddBtn>
+          Add product
+          <Icon symbolId="icon-arrow-right" width="16" height="16" />
+        </AddBtn>
+      </WrapperTitleBtn>
+
+      <DefaultText>Not found products</DefaultText>
+    </Wrapper>
+  );
+};
 
 export default DayExercises;

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 (
+    <Wrapper>
+      <WrapperTitleBtn>
+        <Title>Products</Title>
+        <AddBtn>
+          Add product
+          <Icon symbolId="icon-arrow-right" width="16" height="16" />
+        </AddBtn>
+      </WrapperTitleBtn>
+
+      <DefaultText>Not found products</DefaultText>
+    </Wrapper>
+  );
+};
 
 export default DayProducts;

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

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 (
     <Wrap>
       <DateLabel>{formattedDate}</DateLabel>
-      <CalenderIcon />
+      <CalenderBtn>
+        <Icon symbolId="icon-calendar-orange" width="24" height="24" />
+      </CalenderBtn>
       <BtnPrev onClick={switchToPreviousDay} className="button">
         <Icon symbolId="icon-arrow-left" width="16" height="16" />
       </BtnPrev>

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

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 (
-    <Wrapper>
-      <DiaryTitle>Diary</DiaryTitle>
-      <DaySwitch></DaySwitch>
-      <DayProducts></DayProducts>
-      <DayExercises></DayExercises>
-      <DayDashboard></DayDashboard>
-    </Wrapper>
+    <WrapperAll>
+      <WrapTitleDate>
+        <DiaryTitle>Diary</DiaryTitle>
+        <DaySwitch></DaySwitch>
+      </WrapTitleDate>
+      <WrapTitleDate>
+        <DashboardItemBig></DashboardItemBig>
+        <DayDashboard></DayDashboard>
+      </WrapTitleDate>
+    </WrapperAll>
   );
 };