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 | 9x 45x 51x 87x | import { CountryFlag } from "@common/CountryFlag";
import { Grid, GridProps, Stack } from "@mui/material";
import GiveDivider from "@shared/GiveDivider/GiveDivider";
import SectionCardBase from "@shared/SidePanel/components/SectionCard/SectionCardBase";
import GiveText from "@shared/Text/GiveText";
import React from "react";
export type RenderTextComponentTypes = {
label: string;
isPhoneNumber?: boolean;
value?: string | number | JSX.Element | null;
parentGridProps?: GridProps;
itemGridProps?: GridProps;
isDivider?: boolean;
};
interface Props {
payload: RenderTextComponentTypes[];
leftTitle?: string;
}
function BaseCardComponent({ payload, leftTitle }: Props) {
return (
<SectionCardBase
sx={{
marginTop: "40px",
}}
leftTitle={leftTitle}
>
{payload?.map((item) => {
return <RenderTextsComponent key={item.value + item.label} {...item} />;
})}
</SectionCardBase>
);
}
export default BaseCardComponent;
export const RenderTextsComponent = ({
label,
value,
isPhoneNumber,
parentGridProps,
itemGridProps,
isDivider,
}: RenderTextComponentTypes) => {
return (
<Grid width="100%" my="8px" container {...parentGridProps}>
<Grid item xs={6} {...itemGridProps}>
<GiveText variant="bodyS" color="secondary">
{label}
</GiveText>
</Grid>
<Grid xs={6} item {...itemGridProps}>
<Stack alignItems="center" gap={1} flexDirection="row">
{isPhoneNumber && typeof value === "string" && (
<CountryFlag height={20} width={20} phoneNumber={value} />
)}
<GiveText
variant="bodyS"
color="primary"
sx={{
whiteSpace: "normal",
overflow: "hidden",
textOverflow: "ellipsis",
wordBreak: "break-word",
}}
>
{value}
</GiveText>
</Stack>
</Grid>
{isDivider && <GiveDivider mb={0} />}
</Grid>
);
};
|