57 lines
1.6 KiB
TypeScript
57 lines
1.6 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 };
|