4f:I[707087,["/_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"],"RegistryDependencies"] 50: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"] 51:T258d,"use client"; import { AnimatePresence, motion } from "motion/react"; import * as React from "react"; import { cn } from "@/lib/utils"; export interface GitHubStarButtonProps { /** * The owner of the GitHub repository * @example "johuniq" */ owner: string; /** * The name of the GitHub repository * @example "jolyui" */ repo: string; /** * Manual star count override. If provided, the component will not fetch from GitHub API. */ stars?: number; /** * Additional CSS classes for the button */ className?: string; } interface Particle { id: number; x: number; y: number; angle: number; scale: number; } const StarIcon = ({ className, filled, }: { className?: string; filled?: boolean; }) => ( ); const GitHubIcon = ({ className }: { className?: string }) => ( ); function formatNumber(num: number): string { if (num >= 1000000) { return `${(num / 1000000).toFixed(1).replace(/\.0$/, "")}M`; } if (num >= 1000) { return `${(num / 1000).toFixed(1).replace(/\.0$/, "")}k`; } return num.toLocaleString(); } function useGitHubStars(owner: string, repo: string, manualStars?: number) { const [stars, setStars] = React.useState(manualStars ?? 0); const [loading, setLoading] = React.useState(!manualStars); React.useEffect(() => { if (manualStars !== undefined) { setStars(manualStars); setLoading(false); return; } fetch(`https://api.github.com/repos/${owner}/${repo}`) .then((response) => response.json()) .then((data) => { if (data && typeof data.stargazers_count === "number") { setStars(data.stargazers_count); } }) .catch(console.error) .finally(() => setLoading(false)); }, [owner, repo, manualStars]); return { stars, loading }; } const AnimatedDigit = ({ digit }: { digit: string }) => { const isNumber = /\d/.test(digit); if (!isNumber) { return {digit}; } const num = parseInt(digit, 10); return ( {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((n) => ( {n} ))} ); }; function RollingNumber({ value }: { value: number }) { const formatted = formatNumber(value); const digits = formatted.split(""); return (

{digits.map((digit, i) => ( ))}

); } function StarParticles({ particles }: { particles: Particle[] }) { return ( {particles.map((particle) => ( ))} ); } export function GitHubStarButton({ owner, repo, stars: manualStars, className, }: GitHubStarButtonProps) { const { stars, loading } = useGitHubStars(owner, repo, manualStars); const [localStars, setLocalStars] = React.useState(0); const [isHovered, setIsHovered] = React.useState(false); const [isStarred, setIsStarred] = React.useState(false); const [particles, setParticles] = React.useState([]); const buttonRef = React.useRef(null); React.useEffect(() => { if (stars > 0) { setLocalStars(stars); } }, [stars]); const handleClick = (e: React.MouseEvent) => { if (!isStarred) { e.preventDefault(); setIsStarred(true); setLocalStars((prev) => prev + 1); const centerX = 20; const centerY = 20; const newParticles: Particle[] = Array.from({ length: 12 }, (_, i) => ({ id: Date.now() + i, x: centerX, y: centerY, angle: (Math.PI * 2 * i) / 12 + Math.random() * 0.3, scale: 0.4 + Math.random() * 0.6, })); setParticles(newParticles); setTimeout(() => setParticles([]), 800); // After simulation, navigate to the repo setTimeout(() => { window.open(`https://github.com/${owner}/${repo}`, "_blank"); }, 600); } }; const repoUrl = `https://github.com/${owner}/${repo}`; if (loading && localStars === 0) { return (

); } return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} onClick={handleClick} whileHover={{ scale: 1.03, y: -2 }} whileTap={{ scale: 0.97 }} transition={{ type: "spring", stiffness: 400, damping: 17 }} > {/* GitHub Icon */} {/* Divider */}

{/* Star Section */}

{/* Glow effect */} {/* Divider */} {/* Count */}

{/* Hover shimmer effect */} ); } export default GitHubStarButton; 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"namespace":"@jolyui","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"ui/github-star.tsx","content":"$51","type":"registry:ui","target":""}],"className":"h-[70svh] min-h-80"}]]}]