2021-02-04 19:15:23 +01:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2023-02-16 14:26:14 +01:00
|
|
|
import {
|
|
|
|
Icon,
|
|
|
|
ICON_NAMES,
|
|
|
|
ICON_SIZES,
|
|
|
|
} from '../../../components/component-library';
|
2020-06-01 19:54:32 +02:00
|
|
|
|
|
|
|
const AssetBreadcrumb = ({ accountName, assetName, onBack }) => {
|
|
|
|
return (
|
2020-11-03 00:41:28 +01:00
|
|
|
<button className="asset-breadcrumb" onClick={onBack}>
|
2023-02-16 14:26:14 +01:00
|
|
|
<Icon
|
|
|
|
name={ICON_NAMES.ARROW_LEFT}
|
2020-11-03 00:41:28 +01:00
|
|
|
data-testid="asset__back"
|
2023-02-16 14:26:14 +01:00
|
|
|
marginInlineEnd={3}
|
|
|
|
size={ICON_SIZES.XS}
|
2020-11-03 00:41:28 +01:00
|
|
|
/>
|
|
|
|
<span>{accountName}</span>
|
2020-06-01 19:54:32 +02:00
|
|
|
/
|
2020-11-03 00:41:28 +01:00
|
|
|
<span className="asset-breadcrumb__asset">{assetName}</span>
|
2020-06-04 17:51:44 +02:00
|
|
|
</button>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
|
|
|
};
|
2020-06-01 19:54:32 +02:00
|
|
|
|
|
|
|
AssetBreadcrumb.propTypes = {
|
|
|
|
accountName: PropTypes.string.isRequired,
|
|
|
|
assetName: PropTypes.string.isRequired,
|
|
|
|
onBack: PropTypes.func.isRequired,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2020-06-01 19:54:32 +02:00
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
export default AssetBreadcrumb;
|