All files / nav-sidebar/components Item.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
12x
 
 
 
 
 
12x
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
1x
12x
 
12x
 
 
 
 
2x
2x
2x
1x
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
 
import {
  blue,
} from '@bufferapp/ui/style/colors';
 
import {
  Text,
  Link,
} from '@bufferapp/components';
 
const InnerLink = styled.span`
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
  margin: 0 0.5rem;
  border-radius: 4px;
 
  ${props => !props.selected && css`
    &:hover > span {
      color: ${blue} !important;
    }
  `}
 
  ${props => props.selected && css`
    background-color: ${blue}
  `}
`;
 
const NewTag = styled.em`
  padding: 0.1rem 0.4rem 0.1rem 0.4rem;
  background-color: #168eea;
  border-radius: .25rem;
  margin-left: 4px;
  letter-spacing: 0.1rem;
  font-size: 12px;
  font-style: normal;
  color: white;
`;
 
const Item = ({ href, route, children, onClick, selectedProfile, isNew }) => {
  const selected = href === '/' ? href === route : route.includes(href);
 
  return (
    <Link
      href={href}
      unstyled
      onClick={(e) => {
        e.preventDefault();
        const isCurrent = href === route;
        if (!isCurrent) {
          onClick(href, selectedProfile);
        }
      }}
    >
      <InnerLink selected={selected}>
        <Text color={selected ? 'white' : 'shuttleGray'} size="mini" weight="medium">{children}</Text>
        { isNew && <NewTag>New</NewTag>}
      </InnerLink>
    </Link>
  );
};
 
Item.propTypes = {
  children: PropTypes.node.isRequired,
  href: PropTypes.string.isRequired,
  route: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
  isNew: PropTypes.bool.isRequired,
  selectedProfile: PropTypes.shape({
    id: PropTypes.string,
  }),
};
 
Item.defaultProps = {
  highlightActive: false,
  selectedProfile: {},
  isNew: false,
};
 
export default Item;