bananas-commerce-admin
Version:
What's this, an admin for apes?
15 lines • 1.16 kB
JavaScript
import React, { memo, useMemo } from "react";
import { Box, Stack, Typography } from "@mui/material";
export const LabeledValue = ({ label, value, compact, multiline }) => {
// Use thinner font if compact and value is > 20 chars.
const xsFont = useMemo(() => value != null && typeof value === "string" && value.length > 20 ? '"wdth" 75' : '"wdth" 100', [value]);
return (React.createElement(Stack, { direction: compact ? "row" : "column", justifyContent: compact ? "space-between" : "flex-start" },
React.createElement(Typography, { color: "text.secondary", fontWeight: 500, sx: { whiteSpace: "nowrap", fontVariationSettings: { sm: '"wdth" 100', xs: '"wdth" 75' } }, variant: "subtitle2" }, label),
typeof value === "string" ? (React.createElement(Typography, { sx: {
whiteSpace: multiline ? "break-spaces" : "pre-wrap",
wordBreak: "break-all",
fontVariationSettings: { sm: xsFont, xs: '"wdth" 75' },
}, variant: compact ? "body2" : "body1" }, value)) : (React.createElement(Box, null, value))));
};
export default memo(LabeledValue);
//# sourceMappingURL=LabeledValue.js.map