diff options
author | 2017-10-13 12:29:40 +0200 | |
---|---|---|
committer | 2017-10-13 12:29:40 +0200 | |
commit | 58cda9cc7fb79ca9df6746de7f9662bc08dc156a (patch) | |
tree | 1211600c2a5d3b5f81c435c6896618111a611720 /src/components/settings/navigation | |
download | ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.gz ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.zst ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.zip |
initial commit
Diffstat (limited to 'src/components/settings/navigation')
-rw-r--r-- | src/components/settings/navigation/SettingsNavigation.js | 84 |
1 files changed, 84 insertions, 0 deletions
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js new file mode 100644 index 000000000..3b21a7765 --- /dev/null +++ b/src/components/settings/navigation/SettingsNavigation.js | |||
@@ -0,0 +1,84 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { defineMessages, intlShape } from 'react-intl'; | ||
4 | |||
5 | import Link from '../../ui/Link'; | ||
6 | |||
7 | const messages = defineMessages({ | ||
8 | availableServices: { | ||
9 | id: 'settings.navigation.availableServices', | ||
10 | defaultMessage: '!!!Available services', | ||
11 | }, | ||
12 | yourServices: { | ||
13 | id: 'settings.navigation.yourServices', | ||
14 | defaultMessage: '!!!Your services', | ||
15 | }, | ||
16 | account: { | ||
17 | id: 'settings.navigation.account', | ||
18 | defaultMessage: '!!!Account', | ||
19 | }, | ||
20 | settings: { | ||
21 | id: 'settings.navigation.settings', | ||
22 | defaultMessage: '!!!Settings', | ||
23 | }, | ||
24 | logout: { | ||
25 | id: 'settings.navigation.logout', | ||
26 | defaultMessage: '!!!Logout', | ||
27 | }, | ||
28 | }); | ||
29 | |||
30 | export default class SettingsNavigation extends Component { | ||
31 | static propTypes = { | ||
32 | serviceCount: PropTypes.number.isRequired, | ||
33 | }; | ||
34 | |||
35 | static contextTypes = { | ||
36 | intl: intlShape, | ||
37 | }; | ||
38 | |||
39 | render() { | ||
40 | const { serviceCount } = this.props; | ||
41 | const { intl } = this.context; | ||
42 | |||
43 | return ( | ||
44 | <div className="settings-navigation"> | ||
45 | <Link | ||
46 | to="/settings/recipes" | ||
47 | className="settings-navigation__link" | ||
48 | activeClassName="is-active" | ||
49 | > | ||
50 | {intl.formatMessage(messages.availableServices)} | ||
51 | </Link> | ||
52 | <Link | ||
53 | to="/settings/services" | ||
54 | className="settings-navigation__link" | ||
55 | activeClassName="is-active" | ||
56 | > | ||
57 | {intl.formatMessage(messages.yourServices)} <span className="badge">{serviceCount}</span> | ||
58 | </Link> | ||
59 | <Link | ||
60 | to="/settings/user" | ||
61 | className="settings-navigation__link" | ||
62 | activeClassName="is-active" | ||
63 | > | ||
64 | {intl.formatMessage(messages.account)} | ||
65 | </Link> | ||
66 | <Link | ||
67 | to="/settings/app" | ||
68 | className="settings-navigation__link" | ||
69 | activeClassName="is-active" | ||
70 | > | ||
71 | {intl.formatMessage(messages.settings)} | ||
72 | </Link> | ||
73 | <span className="settings-navigation__expander" /> | ||
74 | <Link | ||
75 | to="/auth/logout" | ||
76 | className="settings-navigation__link" | ||
77 | activeClassName="is-active" | ||
78 | > | ||
79 | {intl.formatMessage(messages.logout)} | ||
80 | </Link> | ||
81 | </div> | ||
82 | ); | ||
83 | } | ||
84 | } | ||