diff --git a/ui/src/components/pagination/index.js b/ui/src/components/pagination/index.js index 8cdd6f87..78054618 100644 --- a/ui/src/components/pagination/index.js +++ b/ui/src/components/pagination/index.js @@ -1,36 +1,97 @@ -const classNames = require('classnames'); +const composers = require('../../shared/composers'); +const constants = require('../../shared/constants'); +const fns = require('../../shared/functions'); const React = require('react'); -const styles = require('./style.css'); +const Styled = require('styled-components'); + +const { + baseBox +} = composers; + +const { + boxes +} = constants; + +const { + rndId +} = fns; + +const { + default: styled, +} = Styled; + +const classNames = { + active: rndId() +}; + +const StyledUl = styled.ul` + display: inline-block; + list-style: none; + margin: 0; + padding: 0; +`; + +const StyledLi = styled.li` + align-items: center; + cursor: pointer; + display: flex; + float: left; + height: 50px; + justify-content: center; + margin-right: 10px; + min-width: 50px; + padding-left: 15px; + padding-right: 15px; + position: relative; + + ${baseBox()} + + &:last-child { + margin-right: inherit; + } + + &:not( .${classNames.active} ):hover { + border: ${boxes.border.checked}; + } + + & a:hover { + text-decoration: none; + } + + &.${classNames.active} { + cursor: default; + } +`; + const Pagination = ({ children, className, - label + label, + style }) => { - const cn = classNames( - className, - styles.pagination - ); - const pages = React.Children.map(children, (child) => { - const cn = classNames( - child.props.className, - child.props.active ? styles.active : '', - styles.pagination_item - ); + const cn = ` + ${child.props.className} + ${child.props.active ? classNames.active : ''} + `.trim(); return ( -