diff options
author | Dan Finlay <542863+danfinlay@users.noreply.github.com> | 2018-08-08 02:31:42 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-08-08 02:31:42 +0800 |
commit | 0601df9dae488d997277bb6b52c28df27546e27c (patch) | |
tree | ae33a0c4610b9a9e865c797258232542a72f57b6 /ui/app/components/tabs/tab | |
parent | 4598554fea7b9435e5cbecc4735c479ffbadf37e (diff) | |
parent | f6490a2a6eda943a374c01df5884acb07ba28869 (diff) | |
download | tangerine-wallet-browser-0601df9dae488d997277bb6b52c28df27546e27c.tar.gz tangerine-wallet-browser-0601df9dae488d997277bb6b52c28df27546e27c.tar.zst tangerine-wallet-browser-0601df9dae488d997277bb6b52c28df27546e27c.zip |
Merge pull request #4954 from MetaMask/v4.9.0
V4.9.0
Diffstat (limited to 'ui/app/components/tabs/tab')
-rw-r--r-- | ui/app/components/tabs/tab/index.js | 2 | ||||
-rw-r--r-- | ui/app/components/tabs/tab/index.scss | 15 | ||||
-rw-r--r-- | ui/app/components/tabs/tab/tab.component.js | 31 |
3 files changed, 48 insertions, 0 deletions
diff --git a/ui/app/components/tabs/tab/index.js b/ui/app/components/tabs/tab/index.js new file mode 100644 index 000000000..fbc309e8e --- /dev/null +++ b/ui/app/components/tabs/tab/index.js @@ -0,0 +1,2 @@ +import Tab from './tab.component' +module.exports = Tab diff --git a/ui/app/components/tabs/tab/index.scss b/ui/app/components/tabs/tab/index.scss new file mode 100644 index 000000000..1de6ffa0e --- /dev/null +++ b/ui/app/components/tabs/tab/index.scss @@ -0,0 +1,15 @@ +.tab { + color: #8C8E94; + font-size: .75rem; + text-transform: uppercase; + cursor: pointer; + padding: 8px 0; + margin: 0 8px; + min-width: 50px; + text-align: center; + + &--active { + color: $black; + border-bottom: 2px solid $curious-blue; + } +} diff --git a/ui/app/components/tabs/tab/tab.component.js b/ui/app/components/tabs/tab/tab.component.js new file mode 100644 index 000000000..a59da8904 --- /dev/null +++ b/ui/app/components/tabs/tab/tab.component.js @@ -0,0 +1,31 @@ +import React from 'react' +import PropTypes from 'prop-types' +import classnames from 'classnames' + +const Tab = props => { + const { name, onClick, isActive, tabIndex } = props + + return ( + <li + className={classnames( + 'tab', + isActive && 'tab--active', + )} + onClick={event => { + event.preventDefault() + onClick(tabIndex) + }} + > + { name } + </li> + ) +} + +Tab.propTypes = { + name: PropTypes.string.isRequired, + onClick: PropTypes.func, + isActive: PropTypes.bool, + tabIndex: PropTypes.number, +} + +export default Tab |