1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 07:24:56 +01:00
metamask-extension/ui/components/app/tab-bar/tab-bar.js

38 lines
1008 B
JavaScript
Raw Normal View History

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
2016-11-04 20:00:56 +01:00
import IconCaretRight from '../../ui/icon/icon-caret-right';
2020-02-15 21:34:12 +01:00
const TabBar = (props) => {
const { tabs = [], onSelect, isActive } = props;
2016-11-04 20:00:56 +01:00
return (
<div className="tab-bar">
{tabs.map(({ key, content, icon }) => (
<button
key={key}
className={classnames('tab-bar__tab pointer', {
'tab-bar__tab--active': isActive(key, content),
})}
onClick={() => onSelect(key)}
>
<div className="tab-bar__tab__content">
<div className="tab-bar__tab__content__icon">{icon}</div>
<div className="tab-bar__tab__content__title">{content}</div>
</div>
<IconCaretRight className="tab-bar__tab__caret" />
</button>
))}
</div>
);
};
2017-11-02 03:30:33 +01:00
TabBar.propTypes = {
isActive: PropTypes.func.isRequired,
2017-11-02 03:30:33 +01:00
tabs: PropTypes.array,
onSelect: PropTypes.func,
};
2017-11-02 03:30:33 +01:00
export default TabBar;