brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

made PulseBox forwar a ref so it can be used with Tooltip

Browse source
This commit is contained in:
Carter 2025-03-31 16:05:10 -06:00
parent fedb930e79
commit ca6f2ac400
2 changed files with 26 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/common/PulseBox.tsx
View file

@ -1,7 +1,7 @@
import { Box, BoxProps, Theme } from "@mui/material";
import { makeStyles } from "@mui/styles";
import classNames from "classnames";
import { ReactNode } from "react";
import { forwardRef, ReactNode } from "react";
const useStyles = makeStyles((_theme: Theme) => ({
pulseWrapper: {
@ -41,12 +41,13 @@ interface Props extends BoxProps {
className?: string;
}
export default function PulseBox(props: Props) {
const PulseBox = forwardRef<HTMLDivElement, Props>((props, ref) => {
const { color, children, className, ...boxProps } = props;
const classes = useStyles()
return (
<Box
ref={ref}
{...boxProps}
className={classNames([classes.pulseWrapper, className])}
style={{ '--pulse-color': color } as React.CSSProperties}
@ -54,4 +55,9 @@ export default function PulseBox(props: Props) {
{children}
</Box>
);
};
});
// Optional: Add a display name for better debugging
PulseBox.displayName = "PulseBox";
export default PulseBox;

32
src/common/StatusPlenum.tsx
View file

@ -1,4 +1,4 @@
import { Grid2, Theme, Typography } from "@mui/material";
import { Grid2, Theme, Tooltip, Typography } from "@mui/material";
import { blue, orange } from "@mui/material/colors";
import { makeStyles } from "@mui/styles";
import { Device } from "models";
@ -16,7 +16,7 @@ const useStyles = makeStyles((theme: Theme) => {
box: {
display: "inline-block",
borderRadius: "6px",
backgroundColor: lightMode ? "rgb(155, 155, 155)" : "rgb(34, 34, 34)",
backgroundColor: lightMode ? "rgb(210, 210, 210)" : "rgb(50, 50, 50)",
padding: theme.spacing(0.75),
marginRight: "auto",
margin: theme.spacing(1),
@ -47,19 +47,21 @@ export default function StatusPlenum(props: Props) {
}, []);
return (
<PulseBox color={color} className={classes.box} >
<Grid2 container direction="column" >
<Grid2>
<Typography variant="body2" style={{ color: orange[400]}}>
{device.status.plenum?.temperature.toFixed(1)}°C
</Typography>
<Tooltip title={"Hello :)"}>
<PulseBox color={color} className={classes.box} >
<Grid2 container direction="column" >
<Grid2>
<Typography variant="body2" style={{ color: orange[700]}}>
{device.status.plenum?.temperature.toFixed(1)}°C
</Typography>
</Grid2>
<Grid2>
<Typography variant="body2" style={{ color: blue[700]}}>
{device.status.plenum?.humidity.toFixed(1)}%
</Typography>
</Grid2>
</Grid2>
<Grid2>
<Typography variant="body2" style={{ color: blue[700]}}>
{device.status.plenum?.humidity.toFixed(1)}%
</Typography>
</Grid2>
</Grid2>
</PulseBox>
</PulseBox>
</Tooltip>
)
}