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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | 1x 1x 1x 1x 85x 85x 85x 85x 85x 85x 85x 85x 85x 85x 85x 85x 85x 85x 85x 85x 18x 15x 1x 1x 1x 14x 18x 85x 85x 85x 85x 85x 85x 85x 85x 85x 85x 85x 85x 85x 85x 85x 85x 85x 85x 85x 85x 85x 2x 2x 2x 2x 2x 2x 2x 1x 1x 1x 2x 2x 85x 85x 85x 85x | import Lottie from 'lottie-react';
import { Button } from '@/components/common/Button';
import { UserReaction } from '@/types';
import { RollingNumber } from '@/components/RollingNumber';
import { ReactNode } from 'react';
interface ReactionButtonProps {
type: UserReaction;
active: boolean;
count: number;
icon: ReactNode;
selectedIcon: ReactNode;
animationData?: object;
isAnimating: boolean;
setIsAnimating: (val: boolean) => void;
showBubble: boolean;
setShowBubble: (val: boolean) => void;
onClick: (type: UserReaction) => void;
disabled?: boolean;
align: 'left' | 'right';
isTimeDisabled?: boolean;
}
export const ReactionButton = ({
type,
active,
count,
icon,
selectedIcon,
animationData,
isAnimating,
setIsAnimating,
showBubble,
setShowBubble,
onClick,
disabled,
align,
isTimeDisabled,
}: ReactionButtonProps) => {
const handleReaction = () => {
if (disabled || isAnimating) return;
if (animationData) {
setShowBubble(true);
setIsAnimating(true);
}
onClick(type);
};
return (
<div
className={`flex gap-1 relative items-center ${
align === 'right' ? 'flex-row-reverse' : ''
} ${isTimeDisabled ? 'opacity-40 cursor-not-allowed' : ''}`}
>
<span className="font-poppins font-medium text-xs leading-sm flex items-center">
<RollingNumber
id={type.toLowerCase()}
value={count}
valueClassName="dark:text-white"
/>
</span>
<span onClick={handleReaction} className="flex items-center">
<div className="relative">
<Button
isActive={active}
icon={icon}
selectedIcon={selectedIcon}
disabled={disabled || isAnimating}
/>
{showBubble && (
<div
className={`absolute top-0 ${align === 'right' ? 'right-0' : 'left-0'} w-[54px] h-[54px] sm:w-[36px] sm:h-[36px] pointer-events-none`}
>
<Lottie
animationData={animationData}
autoplay
loop={false}
onComplete={() => {
setShowBubble(false);
setIsAnimating(false);
}}
/>
</div>
)}
</div>
</span>
</div>
);
};
|