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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | 54x 77x 54x 11x 11x 11x 11x 15x 1x 111x 54x | import { CURRENCY } from "@constants/constants";
import { SummaryContainerBase } from "@features/TransactionPanel/components/atoms";
import TransactionSummaryDetails from "@features/TransactionPanel/components/Summary/TransactionSummaryDetails";
import { TransactionSummaryDetailsItem } from "@features/TransactionPanel/helpers/getTransactionLineItems";
import { Stack, SxProps } from "@mui/material";
import GiveButton from "@shared/Button/GiveButton";
import GiveText from "@shared/Text/GiveText";
import { styled } from "@theme/v2/Provider";
import { useState } from "react";
type Props = {
title: string;
data?: TransactionSummaryDetailsItem[];
component?: React.ReactElement;
type?: "cards" | "users";
};
export const DetailsCard = ({ title, data, component }: Props) => {
return (
<DetailWrapper title={title}>
<SummaryContainer>
{Boolean(component) && component}
{data && <TransactionSummaryDetails list={data} isHideBorder={true} />}
</SummaryContainer>
</DetailWrapper>
);
};
export const InfoListCard = ({ title, data, type }: Props) => {
const [showMore, setShowMore] = useState(false);
const isMoreThanFive = data && data.length > 5 && !showMore;
const usedItems = isMoreThanFive ? data.slice(0, 5) : data;
return (
<DetailWrapper title={title}>
<>
{usedItems?.map((item, index) => (
<SummaryContainer key={index}>
<Stack direction="row" gap="16px" py="12px">
<Stack direction="row" gap="6px" flex={1} alignItems="center">
{Boolean(item.icon) && item.icon}
<Stack direction="column" gap="4px">
{Boolean(item.label) && (
<GiveText variant="bodyS">{item.label}</GiveText>
)}
{type === "users" && (
<GiveText variant="bodyXS" color="secondary">
{item.value}
</GiveText>
)}
</Stack>
</Stack>
{type === "cards" && (
<Stack direction="column" flex={1}>
<GiveText variant="bodyS">
{item.value} {CURRENCY}
</GiveText>
<GiveText variant="bodyXS" color="secondary">
{item.caption}
</GiveText>
</Stack>
)}
</Stack>
</SummaryContainer>
))}
{isMoreThanFive && (
<GiveButton
label="Show More"
size="large"
variant="filled"
color="light"
onClick={() => setShowMore(true)}
/>
)}
</>
</DetailWrapper>
);
};
export function DetailWrapper({
title,
children,
sx = {},
}: {
title: string;
children: React.ReactElement;
sx?: SxProps;
}) {
return (
<Stack gap="16px" sx={sx}>
<GiveText variant="bodyM">{title}</GiveText>
{children}
</Stack>
);
}
const SummaryContainer = styled(SummaryContainerBase)({
padding: "0 20px",
});
|