git ssb

1
import Link from 'next/link';
2
import {
3
  arrayOf,
4
  bool,
5
  element,
6
  string
7
} from 'prop-types';
8
9
export const Crumb = ({ title, href, last }) => {
10
  let content = null;
11
12
  if (last) {
13
    content = (
14
      <span>
15
        { title }
16
      </span>
17
    );
18
  } else {
19
    content = (
20
      <Link href={ href }>
21
        <a title={ title }>
22
          { title }
23
        </a>
24
      </Link>
25
    );
26
  }
27
28
  return (
29
    <div className="crumb">
30
      { content }
31
      {
32
        !last && <span className="separator">{ `<` }</span>
33
      }
34
35
      <style jsx global>{`
36
        .crumb {
37
          display: inline-block;
38
        }
39
        .crumb span,
40
        .crumb a {
41
          color: #9f9f9f;
42
          font-size: 14px;
43
          text-decoration: none;
44
        }
45
46
        .crumb a:hover {
47
          color: #9f9f9f;
48
        }
49
50
        .separator {
51
          margin: 0 10px;
52
        }
53
      `}</style>
54
    </div>
55
  )
56
};
57
58
Crumb.propTypes = {
59
  title: string.isRequired,
60
  href: string.isRequired,
61
  last: bool
62
};
63
64
Crumb.defaultProps = {
65
  last: false
66
};
67
68
export const Breadcrumbs = ({ children }) => (
69
  <div className="breadcrumbs">
70
    { children }
71
  </div>
72
);
73
74
Breadcrumbs.propTypes = {
75
  children: arrayOf(element)
76
};
77
78