Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | 1x 1x 1x 1x 1x 94x 94x 90x 94x 94x 94x 94x 94x 94x 94x 94x 94x 94x 94x 94x | import Collapse from '@mui/material/Collapse';
import { useEffect, useState } from 'react';
/**
* IconTextFader component that smoothly transitions between an icon and text.
* The text is shown when the component is hovered or active, and the icon is shown otherwise.
*
* @component
* @category Components
* @param props - Component props
*
* @example
* ```tsx
* <IconTextFader text="Search" active={isActive}>
* <SearchIcon />
* </IconTextFader>
* ```
* @source
*/
export default function IconTextFader({ children, text, active }: IconTextFaderProps) {
const [isHovered, setIsHovered] = useState(active);
useEffect(() => {
setIsHovered(active);
}, [active]);
return (
<div
style={{
width: '100%',
height: '100%',
}}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(active)}
>
<Collapse in={isHovered}>{text}</Collapse>
<Collapse in={!isHovered}>{children}</Collapse>
</div>
);
}
|