history first draft

src/components/SchedulerHistoryNavigation.tsx

@@ -0,0 +1,52 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import { coursesContext } from '../contexts/CoursesProvider';
+
+type ButtonProps = {
+  direction: 'left' | 'right';
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: space-around;
+`;
+
+const StyledButton = styled.button<ButtonProps>`
+  width: 100px;
+  height: 100px;
+  background-color: ${({ direction }) => (direction === 'left' ? 'red' : 'blue')};
+`;
+
+type SchedulerHistoryNavigationProps = {
+  commisionDate?: Date;
+  changeCurrentTimetable: (value: number) => void;
+};
+
+export const SchedulerHistoryNavigation = ({
+  commisionDate,
+  changeCurrentTimetable,
+}: SchedulerHistoryNavigationProps) => {
+  return (
+    <Wrapper>
+      <StyledButton
+        direction="left"
+        onClick={() => {
+          console.log('left clicked');
+          changeCurrentTimetable(-1);
+        }}
+      >
+        LEFT
+      </StyledButton>
+      {commisionDate}
+      <StyledButton
+        direction="right"
+        onClick={() => {
+          console.log('right clicked');
+          changeCurrentTimetable(1);
+        }}
+      >
+        RIGHT
+      </StyledButton>
+    </Wrapper>
+  );
+};