import React from 'react'; import PropTypes from 'prop-types'; import Typography from '../../ui/typography/typography'; import { COLORS, FONT_WEIGHT, TYPOGRAPHY, } from '../../../helpers/constants/design-system'; export default function TransactionDetailItem({ detailTitle = '', detailText = '', detailTitleColor = COLORS.BLACK, detailTotal = '', subTitle = '', subText = '', }) { return (
{detailTitle} {detailText && ( {detailText} )} {detailTotal}
{React.isValidElement(subTitle) ? (
{subTitle}
) : ( {subTitle} )} {subText}
); } TransactionDetailItem.propTypes = { detailTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), detailTitleColor: PropTypes.string, detailText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), detailTotal: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), subTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), subText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), };