39 lines
980 B
JavaScript
39 lines
980 B
JavaScript
import { Component } from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Chip from '@mui/material/Chip';
|
|
import { formatPrice, parsePriceInput } from '../../../utils/price';
|
|
import {
|
|
TINT_PILL,
|
|
} from '../../../colors';
|
|
|
|
const tierPillSx = {
|
|
height: 22,
|
|
fontSize: 11,
|
|
fontWeight: 600,
|
|
};
|
|
|
|
export default class TierPricePills extends Component {
|
|
render() {
|
|
const { tiers } = this.props;
|
|
return (
|
|
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, minHeight: 22 }}>
|
|
{(tiers ?? []).map((tier) => {
|
|
const gross = parsePriceInput(tier.gross);
|
|
if (gross == null) return null;
|
|
return (
|
|
<Chip
|
|
key={tier.minmultiplier}
|
|
size="small"
|
|
label={`ab ${tier.minmultiplier} · ${formatPrice(gross)}`}
|
|
sx={{
|
|
...tierPillSx,
|
|
bgcolor: TINT_PILL,
|
|
}}
|
|
/>
|
|
);
|
|
})}
|
|
</Box>
|
|
);
|
|
}
|
|
}
|