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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 3x 3x 45x 45x 45x 45x 45x 45x 2x 1x 3x | import React, { useState } from 'react';
import { Styles } from '../defaultStyles';
import { AchievementDetails } from '../types';
interface BadgesButtonProps {
onClick: () => void;
position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
styles: Styles['badgesButton'];
unlockedAchievements: AchievementDetails[];
icon?: React.ReactNode;
drawer?: boolean;
customStyles?: React.CSSProperties;
}
const BadgesButton: React.FC<BadgesButtonProps> = ({
onClick,
position,
styles,
unlockedAchievements,
icon,
drawer = false,
customStyles,
}) => {
const [isHovered, setIsHovered] = useState(false);
const positionStyle = position
? {
[position.split('-')[0]]: '20px',
[position.split('-')[1]]: '20px',
}
: {};
const buttonStyles = {
...styles,
...positionStyle,
...customStyles,
transform: isHovered ? 'scale(1.1)' : 'scale(1)',
};
const achievementsText = 'View Achievements';
const buttonContent = icon ? icon : achievementsText;
return (
<button
onClick={onClick}
style={buttonStyles}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{buttonContent}
</button>
);
};
export default React.memo(BadgesButton); |