1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-01 21:57:06 +01:00
metamask-extension/ui/components/app/tab-bar/tab-bar.js

42 lines
1.1 KiB
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 { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
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>
<Icon
name={ICON_NAMES.ARROW_RIGHT}
size={ICON_SIZES.SM}
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;