Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 1x 109x 109x 218x 109x 1x | import { styled } from "@theme/v2/Provider";
import { Stack } from "@mui/material";
import GiveText from "@shared/Text/GiveText";
import GiveTruncateText from "@shared/Text/GiveTruncateText";
import { parseAmount } from "@utils/index";
export interface ISummaryCard {
paymentFor: string;
total: string;
}
const SummaryCard = ({ paymentFor, total }: ISummaryCard) => {
return (
<StyledContainer>
<StyledStack>
<GiveText variant="bodyS">Payment for</GiveText>
<StyledTruncateText lineClamp={1} variant="bodyS">
{paymentFor}
</StyledTruncateText>
</StyledStack>
<StyledTotalContainer>
<GiveText variant="bodyS">Total</GiveText>
<GiveText variant="h3">${parseAmount(total)}</GiveText>
</StyledTotalContainer>
</StyledContainer>
);
};
const StyledContainer = styled(Stack)(({ theme }) => ({
borderRadius: theme.spacing(1.5),
padding: theme.spacing(2),
gap: theme.spacing(1.5),
background: theme.palette.surface?.secondary,
width: "100%",
}));
const StyledStack = styled(Stack)(({ theme }) => ({
flexDirection: "row",
justifyContent: "space-between",
gap: theme.spacing(1),
}));
const StyledTotalContainer = styled(StyledStack)(({ theme }) => ({
borderTop: `1px solid ${theme.palette?.primitive?.transparent?.["darken-10"]}`,
paddingTop: theme.spacing(2),
}));
const StyledTruncateText = styled(GiveTruncateText)({ maxWidth: "80%" });
export default SummaryCard;
|