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
George Marshall 55abc00c34
Updating all caret icons for dark mode 🥕 (#13861)
* Updating all caret icons

* lint fixes

* Fixing settings search list
2022-03-08 13:50:35 -08:00

38 lines
1008 B
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import IconCaretRight from '../../ui/icon/icon-caret-right';
const TabBar = (props) => {
const { tabs = [], onSelect, isActive } = props;
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>
);
};
TabBar.propTypes = {
isActive: PropTypes.func.isRequired,
tabs: PropTypes.array,
onSelect: PropTypes.func,
};
export default TabBar;