Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | 1x 1x 1x 1x 1x | import React, { useContext } from 'react';
import styled from 'styled-components';
import { coursesContext } from '../contexts/CoursesProvider';
import RightArrow from '../assets/right-arrow.svg';
import LeftArrow from '../assets/left-arrow.svg';
type ButtonProps = {
direction: 'left' | 'right';
};
const Wrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
margin-top:-15px;
`;
const StyledButton = styled.div<ButtonProps>`
cursor:pointer;
user-select: none;
margin:10px;
border-radius:5px;
border-radius: 15px;
background-color: #9ed3ff;
border: 2px solid white;
min-width: 45px;
color: black;
display:flex;
align-items:center;
justify-content:center;
padding: 12px;
:hover{
background-color:#85c8ff;
}
transition: color 0.3s, background-color 0.3s;
`;
const StyledArrow = styled.img`
width:20px;
`;
const StyledDate = styled.div`
user-select: none;
margin:10px;
border-radius:5px;
border-radius: 15px;
background-color: #FFDC61;
border: 2px solid white;
min-width: 45px;
text-align:center;
color: black;
padding: 10px;
`;
type SchedulerHistoryNavigationProps = {
commisionDate?: Date;
SubstractCurrentTimetable: (value: number) => void;
AddCurrentTimetable: (value: number) => void;
};
export const SchedulerHistoryNavigation = ({
commisionDate,
SubstractCurrentTimetable,
AddCurrentTimetable,
}: SchedulerHistoryNavigationProps) => {
return (
<Wrapper>
<StyledButton
direction="left"
onClick={() => {
SubstractCurrentTimetable(-1);
}}
>
<StyledArrow src={LeftArrow}></StyledArrow>
</StyledButton>
<StyledDate>{commisionDate}</StyledDate>
<StyledButton
direction="right"
onClick={() => {
AddCurrentTimetable(1);
}}
>
<StyledArrow src={RightArrow}></StyledArrow>
</StyledButton>
</Wrapper>
);
};
|