GitHub Stars Wheel

1'use client';
2 
3import * as React from 'react';
4import { StarIcon } from 'lucide-react';
5 
6import {
7  ScrollingNumber as ScrollingNumberPrimitive,
8  ScrollingNumberContainer as ScrollingNumberContainerPrimitive,
9  ScrollingNumberItems as ScrollingNumberItemsPrimitive,
10  ScrollingNumberHighlight as ScrollingNumberHighlightPrimitive,
11  type ScrollingNumberContainerProps as ScrollingNumberContainerPrimitiveProps,
12} from '@/components/animate-ui/primitives/texts/scrolling-number';
13import { cn } from '@/lib/utils';
14import {
15  Particles,
16  ParticlesEffect,
17} from '@/components/animate-ui/primitives/effects/particles';
18 
19function percentageBetween(value: number, min: number, max: number): number {
20  return ((value - min) / (max - min)) * 100;
21}
22 
23type GitHubStarsWheelProps = {
24  username?: string;
25  repo?: string;
26  direction?: 'btt' | 'ttb';
27  delay?: number;
28  value?: number;
29  step?: number;
30} & Omit<
31  ScrollingNumberContainerPrimitiveProps,
32  'direction' | 'number' | 'step'
33>;
34 
35function GitHubStarsWheel({
36  username,
37  repo,
38  direction = 'btt',
39  itemsSize = 35,
40  sideItemsCount = 2,
41  delay = 0,
42  step = 100,
43  value,
44  className,
45  ...props
46}: GitHubStarsWheelProps) {
47  const [stars, setStars] = React.useState(value ?? 0);
48  const [currentStars, setCurrentStars] = React.useState(0);
49  const [isLoading, setIsLoading] = React.useState(true);
50  const roundedStars = React.useMemo(
51    () => Math.round(stars / step) * step,
52    [stars, step],
53  );
54  const isCompleted = React.useMemo(
55    () => currentStars === roundedStars,
56    [currentStars, roundedStars],
57  );
58  const fillPercentage = React.useMemo(
59    () => percentageBetween(currentStars, 0, roundedStars),
60    [currentStars, roundedStars],
61  );
62 
63  React.useEffect(() => {
64    if (value !== undefined && username && repo) return;
65 
66    const timeout = setTimeout(() => {
67      fetch(`https://api.github.com/repos/${username}/${repo}`)
68        .then((response) => response.json())
69        .then((data) => {
70          if (data && typeof data.stargazers_count === 'number') {
71            setStars(data.stargazers_count);
72          }
73        })
74        .catch(console.error)
75        .finally(() => setIsLoading(false));
76    }, delay);
77 
78    return () => clearTimeout(timeout);
79  }, [username, repo, value, delay]);
80 
81  return (
82    !isLoading && (
83      <ScrollingNumberContainerPrimitive
84        key={direction}
85        className={cn('w-28', className)}
86        direction={direction}
87        number={roundedStars}
88// … truncated