changed "prev" and "next" string to arrow icons

This commit is contained in:
Kim, Jimin 2021-12-18 17:54:17 +09:00
parent b43094fef9
commit d349de74ee

View file

@ -1,6 +1,9 @@
import styled from "styled-components" import styled from "styled-components"
import { Link } from "react-router-dom" import { Link } from "react-router-dom"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons"
import theming from "../../styles/theming" import theming from "../../styles/theming"
const StyledNextPrevContainer = styled.div` const StyledNextPrevContainer = styled.div`
@ -53,14 +56,22 @@ const NextPrevButtons = (props: { prevURL?: string; nextURL?: string }) => {
return ( return (
<StyledNextPrevContainer> <StyledNextPrevContainer>
{props.prevURL ? ( {props.prevURL ? (
<StyledLink to={props.prevURL}>prev</StyledLink> <StyledLink to={props.prevURL}>
<FontAwesomeIcon icon={faArrowLeft} />
</StyledLink>
) : ( ) : (
<StyledDisabledLink>prev</StyledDisabledLink> <StyledDisabledLink>
<FontAwesomeIcon icon={faArrowLeft} />
</StyledDisabledLink>
)} )}
{props.nextURL ? ( {props.nextURL ? (
<StyledLink to={props.nextURL}>next</StyledLink> <StyledLink to={props.nextURL}>
<FontAwesomeIcon icon={faArrowRight} />
</StyledLink>
) : ( ) : (
<StyledDisabledLink>next</StyledDisabledLink> <StyledDisabledLink>
<FontAwesomeIcon icon={faArrowRight} />
</StyledDisabledLink>
)} )}
</StyledNextPrevContainer> </StyledNextPrevContainer>
) )