4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T3494,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { cn } from "../../../lib/utils"; const DEGREES_TO_RADIANS = 180; const ANGLE_OFFSET_BASE = 90; const DELAY_DIVISOR = 1000; const ROTATION_MULTIPLIER = 6; const SCALE_BASE = 0.8; const SCALE_DIVISOR = 30; const PARTICLE_SIZE_STAR_LARGE = 12; const PARTICLE_SIZE_STAR_MEDIUM = 10; const PARTICLE_SIZE_CIRCLE_LARGE = 6; const PARTICLE_SIZE_CIRCLE_MEDIUM = 5; const PARTICLE_ANGLE_LEFT = -60; const PARTICLE_ANGLE_CENTER = 0; const PARTICLE_ANGLE_LEFT_SMALL = -30; const THUMB_ANIMATION_DURATION = 1200; const PARTICLE_ANIMATION_DURATION = 1000; const LIKE_STATE_DELAY = 100; const AUTO_PLAY_INTERVAL = 3000; const PARTICLE_RETURN_DELAY_OUTER = 0; const PARTICLE_RETURN_DELAY_INNER = 0.05; type Particle = { id: number; type: "star" | "circle"; angle: number; distance: number; delay: number; returnDelay: number; rotation: number; size: number; scale: number; color: string; }; function LikeButton({ isPlaying = false, onClick, className, particleCount = 5, colors = ["var(--foreground)"], colorMode = "alternating", }: { isPlaying?: boolean; onClick?: () => void; className?: string; particleCount?: number; colors?: string[]; colorMode?: "alternating" | "random"; }) { const [particles, setParticles] = useState([]); const [isThumbAnimating, setIsThumbAnimating] = useState(false); const [isLiked, setIsLiked] = useState(false); const intervalRef = useRef(null); const [isFilled, setIsFilled] = useState(false); const [isAnimating, setIsAnimating] = useState(false); const createParticle = useCallback( (angleOffset: number, type: "star" | "circle", size: number, color: string): Particle => { const baseAngle = -Math.PI / 2; const angle = baseAngle + (angleOffset * Math.PI) / DEGREES_TO_RADIANS; const absAngle = Math.abs(angleOffset); let returnDelay = PARTICLE_RETURN_DELAY_OUTER; if (absAngle === PARTICLE_ANGLE_CENTER) { returnDelay = PARTICLE_RETURN_DELAY_INNER; } else if (absAngle === Math.abs(PARTICLE_ANGLE_LEFT_SMALL)) { returnDelay = PARTICLE_RETURN_DELAY_INNER; } else if (absAngle === Math.abs(PARTICLE_ANGLE_LEFT)) { returnDelay = PARTICLE_RETURN_DELAY_OUTER; } return { id: Date.now() + angleOffset + size + Math.random(), type, angle, distance: 40, delay: (angleOffset + ANGLE_OFFSET_BASE) / DELAY_DIVISOR, returnDelay, rotation: angleOffset * ROTATION_MULTIPLIER, size, scale: SCALE_BASE + size / SCALE_DIVISOR, color, }; }, [] ); const createParticleSet = useCallback((): Particle[] => { const particles: Particle[] = []; const angleSpread = 120; const angleStep = particleCount > 1 ? angleSpread / (particleCount - 1) : 0; const startAngle = -angleSpread / 2; for (let i = 0; i < particleCount; i++) { const angleOffset = startAngle + i * angleStep; const type: "star" | "circle" = i % 2 === 0 ? "star" : "circle"; const size = type === "star" ? i % 3 === 0 ? PARTICLE_SIZE_STAR_LARGE : PARTICLE_SIZE_STAR_MEDIUM : i % 3 === 0 ? PARTICLE_SIZE_CIRCLE_LARGE : PARTICLE_SIZE_CIRCLE_MEDIUM; let color: string; if (colorMode === "random") { color = colors[Math.floor(Math.random() * colors.length)]; } else { color = colors[i % colors.length]; } particles.push(createParticle(angleOffset, type, size, color)); } return particles; }, [particleCount, colors, colorMode, createParticle]); const startThumbAnimation = useCallback(() => { setIsThumbAnimating(true); setIsFilled(true); setIsAnimating(true); setTimeout(() => { setIsThumbAnimating(false); setIsFilled(false); setIsAnimating(false); }, THUMB_ANIMATION_DURATION); }, []); const startParticleAnimation = useCallback(() => { setParticles(createParticleSet()); setTimeout(() => { setParticles([]); }, PARTICLE_ANIMATION_DURATION); }, [createParticleSet]); const handleClick = (e: React.MouseEvent | React.TouchEvent) => { e.preventDefault(); e.stopPropagation(); if (isAnimating || isPlaying) { return; } const newLikedState = !isLiked; if (newLikedState) { startThumbAnimation(); startParticleAnimation(); setTimeout(() => { setIsLiked(true); }, LIKE_STATE_DELAY); } else { setIsLiked(false); setIsFilled(false); } onClick?.(); }; const handleTouchStart = (e: React.TouchEvent) => { if (isAnimating) { e.preventDefault(); e.stopPropagation(); } }; useEffect(() => { if (isPlaying) { startThumbAnimation(); startParticleAnimation(); intervalRef.current = setInterval(() => { startThumbAnimation(); startParticleAnimation(); }, AUTO_PLAY_INTERVAL); } else if (intervalRef.current) { clearInterval(intervalRef.current); intervalRef.current = null; } return () => { if (intervalRef.current) { clearInterval(intervalRef.current); } }; }, [isPlaying, startThumbAnimation, startParticleAnimation]); return (

{particles.map((particle) => (

))}

); } export { LikeButton }; 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"registry/brook/tailwind/ui/like-button.tsx","content":"$50","type":"registry:file","target":"~/components/ui/like-button/like-button.tsx"}],"className":"h-[70svh] min-h-80"}]]}]