57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import { Box, BoxProps, Theme } from "@mui/material";
|
|
import { makeStyles } from "@mui/styles";
|
|
import classNames from "classnames";
|
|
import { ReactNode } from "react";
|
|
|
|
const useStyles = makeStyles((_theme: Theme) => ({
|
|
pulseWrapper: {
|
|
position: 'relative',
|
|
display: 'block', // Changed to block to respect Box margins
|
|
width: 'fit-content', // Shrinks to child width
|
|
'&::after': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
border: '2px solid var(--pulse-color)',
|
|
borderRadius: 'inherit', // Should inherit from Box
|
|
animation: '$pulse 2s infinite ease-in-out',
|
|
pointerEvents: 'none',
|
|
boxSizing: 'border-box',
|
|
transition: "border-color 0.35s ease-in-out",
|
|
},
|
|
},
|
|
'@keyframes pulse': {
|
|
from: {
|
|
transform: "scale(1)",
|
|
opacity: 1
|
|
},
|
|
to: {
|
|
transform: "scale(1.25)",
|
|
opacity: 0
|
|
}
|
|
},
|
|
}));
|
|
|
|
interface Props extends BoxProps {
|
|
color: string;
|
|
children: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export default function PulseBox(props: Props) {
|
|
const { color, children, className, ...boxProps } = props;
|
|
const classes = useStyles()
|
|
|
|
return (
|
|
<Box
|
|
{...boxProps}
|
|
className={classNames([classes.pulseWrapper, className])}
|
|
style={{ '--pulse-color': color } as React.CSSProperties}
|
|
>
|
|
{children}
|
|
</Box>
|
|
);
|
|
};
|