SortIcon.js

import styled from 'styled-components';

import { SORT_ORDERS } from './constants';

const { ASC, DESC } = SORT_ORDERS;

const SortIcon = styled.span`
  margin-left: 0.5em;
  height: 1em;
  vertical-align: middle;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;

  &::before,
  &::after {
    width: 0;
    height: 0;
    content: '';
    display: block;
    border-left: 0.35em solid transparent;
    border-right: 0.35em solid transparent;
  }
  
  &::before {
    margin-bottom: 0.25em;
    border-bottom: 0.35em solid #818c97;
    
    ${({ sortOrder }) => sortOrder === DESC && 'border-bottom-color: #e93f43'}
  }

  &::after {
    border-top: 0.35em solid #818c97;
    ${({ sortOrder }) => sortOrder === ASC && 'border-top-color: #e93f43'}
  }  
`;

export default SortIcon;