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 | 65x 218x | import { Box, SxProps } from "@mui/material";
import React from "react";
import { palette } from "@palette";
import { Text } from "../Text";
type KeyValProps = {
keyName: React.ReactNode;
value: React.ReactNode;
keyProps?: any;
valProps?: any;
textVariant?: boolean;
isAmount?: boolean;
sx?: SxProps;
fontWeight400?: boolean;
mobileView?: boolean;
vertical?: boolean;
align?: "right" | "left";
};
export const KeyVal: React.FC<KeyValProps> = ({
keyName,
value,
keyProps,
valProps,
textVariant,
isAmount,
mobileView,
align,
vertical,
sx,
}) => {
return (
<Box
className="keyVal-container"
sx={{
textAlign: align,
flexDirection: vertical ? "column" : "row",
...(mobileView && {
display: "flex",
justifyContent: "space-between",
padding: "12px 8px",
width: "100%",
}),
...(sx && sx),
}}
>
{typeof keyName === "string" || typeof keyName === "number" ? (
<Text
className="keyVal-key"
fontWeight="light"
fontSize="12px"
color={palette.neutral[70]}
{...keyProps}
>
{keyName}
</Text>
) : (
<>{keyName}</>
)}
{typeof value === "string" || typeof value === "number" ? (
<Text
className="keyVal-value"
variant="body"
fontSize="14px"
minHeight="19.6px"
fontWeight="book"
textTransform={keyName !== "Email" ? "capitalize" : undefined}
color={textVariant && palette.neutral[800]}
{...valProps}
>
{value} {isAmount && "USD"}
</Text>
) : (
<>{value}</>
)}
</Box>
);
};
|