contiago-toolbar/app/components/Pagination/Circle.js

One of the options for outputting content from contiago xml-server

import styled from 'styled-components';

const getSize = (index, pageNumber) => {
  switch (Math.abs(index - pageNumber)) {
    case 0:
      return '0.7vw';
    case 1:
      return '0.5vw';
    case 2:
      return '0.3vw';
    case 3:
      return '0.15vw';
    default:
      return '0';
  }
};

export default styled.div`
  display: ${(props) =>
    Math.abs(props.index - props.pageNumber) > 4 ? 'none' : 'flex'};
  width: ${(props) => getSize(props.index, props.pageNumber)};
  height: ${(props) => getSize(props.index, props.pageNumber)};
  opacity: ${(props) =>
    Math.abs(props.index - props.pageNumber) === 0 ? '1' : '0.5'};
  border-radius: 50%;
  margin: 0 0.15vw;
  background: ${(props) => props.theme.fontColor};
  cursor: pointer;
  transition: 0.5s;
`;