tudor.stanciu
/
network-resurrector
mirror of https://dev.azure.com/tstanciu94/NetworkResurrector/_git/NetworkResurrector
1
0
Fork 0
Code Issues 1 Packages Projects Releases Wiki Activity

Refactor DataLabel component styles

master
Tudor Stanciu 2024-03-25 02:33:37 +02:00
parent 77c0264963
commit 8174e63a6e
1 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/components/common/DataLabel.js
View File

@ -1,9 +1,9 @@
import React, { useMemo } from "react";
import PropTypes from "prop-types";
import Typography from "@mui/material/Typography";
import { makeStyles } from "@mui/material/styles";
import { useTheme } from "@mui/material/styles";
const useStyles = makeStyles(theme => ({
const getStyles = theme => ({
panel: {
display: "flex"
},
@ -13,18 +13,19 @@ const useStyles = makeStyles(theme => ({
data: {
fontWeight: theme.typography.fontWeightMedium
}
}));
});
const DataLabel = ({ label, data }) => {
const classes = useStyles();
const theme = useTheme();
const lbl = useMemo(() => (label.endsWith(":") ? label : `${label}:`), [label]);
const styles = getStyles(theme);
return (
<div className={classes.panel}>
<Typography variant="body2" className={classes.label}>
<div style={styles.panel}>
<Typography variant="body2" sx={styles.label}>
{lbl}
</Typography>
<Typography variant="body2" className={classes.data}>
<Typography variant="body2" sx={styles.data}>
{data}
</Typography>
</div>