Files: ffb059a9465e9ad3d05e45d9090b4beaba053fed / components / breadcrumbs.js
1210 bytesRaw
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 |
Built with git-ssb-web