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 | 32x 288x | import { Grid } from "@mui/material";
import GiveDivider from "@shared/GiveDivider/GiveDivider";
import SectionCardBase from "@shared/SidePanel/components/SectionCard/SectionCardBase";
import GiveText from "@shared/Text/GiveText";
import { TextProps } from "@shared/Text/giveText.types";
import GiveTruncateText from "@shared/Text/GiveTruncateText";
import React from "react";
export type CustomerSectionItem = {
label: string;
value?: string | number;
icon?: React.ReactElement;
customValueTextProps?: Omit<TextProps, "children">;
};
interface Props {
items: CustomerSectionItem[];
title: string;
dividerIndex?: number;
}
//TODO: integrate data
export function CustomerSection({ items, title, dividerIndex }: Props) {
return (
<SectionCardBase leftTitle={title}>
<Grid data-testid={`${title}-grid`} container spacing="20px">
{items.map((item, index) => (
<React.Fragment key={`${item.label} - ${item.value}`}>
<Grid item xs={6}>
<GiveText variant="bodyS" color="secondary">
{item.label}
</GiveText>
</Grid>
<Grid
item
xs={6}
display="flex"
flexDirection="row"
alignItems="center"
gap="8px"
>
{item?.icon}
<GiveTruncateText
lineClamp={2}
variant="bodyS"
{...item?.customValueTextProps}
>
{item.value || "-"}
</GiveTruncateText>
</Grid>
{dividerIndex === index && (
<Grid item xs={12}>
<GiveDivider sx={{ marginTop: 0, marginBottom: 0 }} />
</Grid>
)}
</React.Fragment>
))}
</Grid>
</SectionCardBase>
);
}
|