52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import useMediaQuery from '@mui/material/useMediaQuery';
|
|
import { SxProps, useTheme } from '@mui/material/styles';
|
|
|
|
import './Beta.css';
|
|
|
|
type BetaProps = {
|
|
adaptive?: boolean;
|
|
onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
|
|
sx?: SxProps;
|
|
}
|
|
|
|
const Beta: React.FC<BetaProps> = (props : BetaProps) => {
|
|
const { onClick, adaptive = true, sx = {} } = props;
|
|
const betaRef = useRef<HTMLElement | null>(null);
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
const [animationKey, setAnimationKey] = useState<number>(0);
|
|
const [firstPass, setFirstPass] = useState<boolean>(true);
|
|
|
|
useEffect(() => {
|
|
// Initial animation trigger
|
|
if (firstPass && betaRef.current) {
|
|
triggerAnimation();
|
|
setFirstPass(false);
|
|
}
|
|
}, [firstPass]);
|
|
|
|
const triggerAnimation = (): void => {
|
|
if (!betaRef.current) return;
|
|
|
|
// Increment animation key to force React to recreate the element
|
|
setAnimationKey(prevKey => prevKey + 1);
|
|
|
|
// Ensure the animate class is present
|
|
betaRef.current.classList.add('animate');
|
|
};
|
|
|
|
return (
|
|
<Box sx={sx} className={`beta-clipper ${adaptive && isMobile && "mobile"}`} onClick={(e) => { onClick && onClick(e); }}>
|
|
<Box ref={betaRef} className={`beta-label ${adaptive && isMobile && "mobile"}`}>
|
|
<Box key={animationKey} className="particles"></Box>
|
|
<Box>BETA</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export {
|
|
Beta
|
|
}; |