69 lines
1.4 KiB
TypeScript
69 lines
1.4 KiB
TypeScript
import styled from "styled-components"
|
|
import { Link } from "react-router-dom"
|
|
|
|
import theming from "../../styles/theming"
|
|
|
|
const StyledNextPrevContainer = styled.div`
|
|
display: flex;
|
|
justify-content: space-between;
|
|
size: 100%;
|
|
`
|
|
|
|
const StyledLink = styled(Link)`
|
|
${theming.styles.navbarButtonStyle}
|
|
|
|
background-color: ${(props) =>
|
|
theming.theme(props.theme.currentTheme, {
|
|
light: "#EEEEEE",
|
|
dark: "#202225",
|
|
})};
|
|
|
|
height: 1rem;
|
|
width: 2rem;
|
|
margin-top: 2rem;
|
|
|
|
line-height: 1rem;
|
|
text-align: center;
|
|
`
|
|
|
|
const StyledDisabledLink = styled.div`
|
|
font-size: 1rem;
|
|
border-radius: 0.5rem;
|
|
float: left;
|
|
padding: 14px 16px;
|
|
text-decoration: none;
|
|
transition: transform 0.1s linear;
|
|
color: grey;
|
|
background-color: ${(props) =>
|
|
theming.theme(props.theme.currentTheme, {
|
|
light: "#EEEEEE",
|
|
dark: "#202225",
|
|
})};
|
|
|
|
height: 1rem;
|
|
width: 2rem;
|
|
margin-top: 2rem;
|
|
|
|
line-height: 1rem;
|
|
text-align: center;
|
|
user-select: none;
|
|
`
|
|
|
|
const NextPrevButtons = (props: { prevURL?: string; nextURL?: string }) => {
|
|
return (
|
|
<StyledNextPrevContainer>
|
|
{props.prevURL ? (
|
|
<StyledLink to={props.prevURL}>prev</StyledLink>
|
|
) : (
|
|
<StyledDisabledLink>prev</StyledDisabledLink>
|
|
)}
|
|
{props.nextURL ? (
|
|
<StyledLink to={props.nextURL}>next</StyledLink>
|
|
) : (
|
|
<StyledDisabledLink>next</StyledDisabledLink>
|
|
)}
|
|
</StyledNextPrevContainer>
|
|
)
|
|
}
|
|
|
|
export default NextPrevButtons
|