import React from 'react' import styled from 'styled-components' import { CustomArrowProps } from 'react-slick' import { FaArrowLeft, FaArrowRight } from 'react-icons/fa' const StyledArrow = styled.div` position: absolute; cursor: pointer; z-index: 11; color: black; margin: -25px 15px 0 15px; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 50px; border: 2px solid #000000; transition: 300ms; & svg { transition: color 300ms; } &:hover { border-color: ${(props) => props.theme.palette.primary.main}; } &:hover svg { color: ${(props) => props.theme.palette.primary.main}; } ` const StyledNextArrow = styled(StyledArrow)` right: 0; top: 50%; ` const NextArrow = ({ onClick }: CustomArrowProps) => { return ( ) } const StyledPrevArrow = styled(StyledArrow)` left: 0; top: 50%; ` const PrevArrow = ({ onClick }: CustomArrowProps) => { return ( ) } export { NextArrow, PrevArrow }