packages/components/containers/payments/AmountButton.tsx

   1 import type { ButtonProps } from '@proton/atoms';
   2 import { Button } from '@proton/atoms';
   3 import Price from '@proton/components/components/price/Price';
   4 import { type Currency } from '@proton/payments';
   5 import clsx from '@proton/utils/clsx';
   6
   7 interface Props extends Omit<ButtonProps, 'onSelect' | 'onClick'> {
   8     value?: number;
   9     amount?: number;
  10     currency?: Currency;
  11     onSelect: (value: number) => void;
  12 }
  13
  14 const AmountButton = ({ value = 0, amount = 0, currency, onSelect, className = '', ...rest }: Props) => {
  15     return (
  16         <Button
  17             aria-pressed={value === amount}
  18             className={clsx(['field', className, value === amount && 'is-active'])}
  19             onClick={() => onSelect(value)}
  20             {...rest}
  21         >
  22             <Price currency={currency}>{value}</Price>
  23         </Button>
  24     );
  25 };
  26
  27 export default AmountButton;