Merge pull request #3 from ViktorSvertoka/Dima-DiaryPage

src/components/Diary/DayDashboard/DayDashboard.jsx

@@ -0,0 +1,3 @@
+const DayDashboard = () => {};
+
+export default DayDashboard;

src/components/Diary/DayExercises/DayExercises.jsx

@@ -0,0 +1,3 @@
+const DayExercises = () => {};
+
+export default DayExercises;

src/components/Diary/DayProducts/DayProducts.jsx

@@ -0,0 +1,3 @@
+const DayProducts = () => {};
+
+export default DayProducts;

src/components/Diary/DaySwitch/DaySwitch.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { useState } from 'react';
+import {
+  Wrap,
+  DateLabel,
+  CalenderIcon,
+  BtnPrev,
+  DayChangeIcon,
+  BtnNext,
+} from './DaySwitch.styled';
+
+const DaySwitch = () => {
+  const [currentDate, setCurrentDate] = useState(new Date());
+
+  const switchToPreviousDay = () => {
+    const previousDay = new Date(currentDate);
+    previousDay.setDate(previousDay.getDate() - 1);
+    setCurrentDate(previousDay);
+  };
+
+  const switchToNextDay = () => {
+    const nextDay = new Date(currentDate);
+    nextDay.setDate(nextDay.getDate() + 1);
+    setCurrentDate(nextDay);
+  };
+
+  const formattedDate = `${currentDate
+    .getDate()
+    .toString()
+    .padStart(2, '0')}/${(currentDate.getMonth() + 1)
+    .toString()
+    .padStart(2, '0')}/${currentDate.getFullYear()}`;
+
+  return (
+    <Wrap>
+      <DateLabel>{formattedDate}</DateLabel>
+      <CalenderIcon />
+      <BtnPrev onClick={switchToPreviousDay}>
+        <DayChangeIcon />
+      </BtnPrev>
+      <BtnNext onClick={switchToNextDay}>
+        <DayChangeIcon />
+      </BtnNext>
+    </Wrap>
+  );
+};
+
+export default DaySwitch;

src/components/Diary/DaySwitch/DaySwitch.styled.jsx

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+const Wrap = styled.div`
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+`;
+
+const DateLabel = styled.p`
+  color: #efede8;
+  font-family: Roboto;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 32px;
+`;
+
+const CalenderIcon = styled.svg`
+  width: 24px;
+  height: 24px;
+`;
+
+const BtnPrev = styled.button`
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  cursor: pointer;
+`;
+
+const BtnNext = styled.button`
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  cursor: pointer;
+`;
+
+const DayChangeIcon = styled.svg``;
+
+export { Wrap, DateLabel, CalenderIcon, BtnPrev, BtnNext, DayChangeIcon };

src/pages/DiaryPage/DiaryPage.jsx

@@ -1,5 +1,19 @@
+import DaySwitch from '../../components/Diary/DaySwitch/DaySwitch';
+import DayProducts from '../../components/Diary/DayProducts/DayProducts';
+import DayExercises from '../../components/Diary/DayExercises/DayExercises';
+import DayDashboard from '../../components/Diary/DayDashboard/DayDashboard';
+import { DiaryTitle, Wrapper } from './DiaryPage.styled';
+
 const DiaryPage = () => {
-  return <div>Diary page</div>;
+  return (
+    <Wrapper>
+      <DiaryTitle>Diary</DiaryTitle>
+      <DaySwitch></DaySwitch>
+      <DayProducts></DayProducts>
+      <DayExercises></DayExercises>
+      <DayDashboard></DayDashboard>
+    </Wrapper>
+  );
 };
 
 export default DiaryPage;

src/pages/DiaryPage/DiaryPage.styled.jsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  display: flex;
+  padding: 52px 96px 68px;
+  background: #040404;
+`;
+
+const DiaryTitle = styled.h2`
+  padding-top: 20px;
+`;
+
+export { Wrapper, DiaryTitle };