1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/app/tab-bar/tab-bar.js
George Marshall 739075662c
Migrating Icon to typescript and deprecating JS component (#18431)
* Migrating Icon to typescript and deprecating JS component

* gw suggestions (#18434)

---------

Co-authored-by: Garrett Bear <gwhisten@gmail.com>
2023-04-04 09:48:04 -07:00

46 lines
1.1 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import {
Icon,
ICON_NAMES,
ICON_SIZES,
} from '../../component-library/icon/deprecated';
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>
<Icon
name={ICON_NAMES.ARROW_RIGHT}
size={ICON_SIZES.SM}
className="tab-bar__tab__caret"
/>
</button>
))}
</div>
);
};
TabBar.propTypes = {
isActive: PropTypes.func.isRequired,
tabs: PropTypes.array,
onSelect: PropTypes.func,
};
export default TabBar;