1  import { Trans } from '@lingui/macro';
 2  import { Typography } from '@mui/material';
 3  import Box from '@mui/material/Box';
 4  import React from 'react';
 5  
 6  import { FormattedNumber } from './primitives/FormattedNumber';
 7  
 8  type ReserveSubheaderProps = {
 9    value: string;
10    rightAlign?: boolean;
11  };
12  
13  export function ReserveSubheader({ value, rightAlign }: ReserveSubheaderProps) {
14    return (
15      <Box
16        sx={{
17          p: rightAlign ? { xs: '0', xsm: '2px 0' } : { xs: '0', xsm: '3.625px 0px' },
18          display: 'inline-flex',
19          alignItems: 'center',
20          justifyContent: 'center',
21        }}
22      >
23        {value === 'Disabled' ? (
24          <Typography component="span" sx={{ mr: 0.5 }} variant="secondary12" color="text.muted">
25            (<Trans>Disabled</Trans>)
26          </Typography>
27        ) : (
28          <FormattedNumber
29            compact
30            value={value}
31            variant="secondary12"
32            color="text.secondary"
33            symbolsVariant="secondary12"
34            symbolsColor="text.secondary"
35            symbol="USD"
36          />
37        )}
38      </Box>
39    );
40  }