()
| 7 | import { useEffect } from 'react' |
| 8 | |
| 9 | const AnimatedBadge = () => { |
| 10 | const { stars, setStars } = useStarStore() |
| 11 | |
| 12 | useEffect(() => { |
| 13 | const fetchStars = async () => { |
| 14 | if (stars > 100) return |
| 15 | try { |
| 16 | const response = await fetch( |
| 17 | 'https://api.github.com/repos/syntaxui/syntaxui', |
| 18 | { |
| 19 | headers: process.env.NEXT_PUBLIC_GITHUB_OAUTH_TOKEN |
| 20 | ? { |
| 21 | Authorization: `Bearer ${process.env.NEXT_PUBLIC_GITHUB_OAUTH_TOKEN}`, |
| 22 | 'Content-Type': 'application/json', |
| 23 | } |
| 24 | : {}, |
| 25 | }, |
| 26 | ) |
| 27 | |
| 28 | if (response.ok) { |
| 29 | const data = await response.json() |
| 30 | setStars(data.stargazers_count || 100) |
| 31 | } |
| 32 | } catch (error) { |
| 33 | console.error('Error fetching GitHub stars:', error) |
| 34 | } |
| 35 | } |
| 36 | |
| 37 | fetchStars() |
| 38 | }, [stars, setStars]) |
| 39 | |
| 40 | return ( |
| 41 | <motion.a |
| 42 | href="https://github.com/syntaxUI/syntaxui" |
| 43 | target="_blank" |
| 44 | rel="noopener noreferrer" |
| 45 | className="relative mb-8 inline-flex overflow-hidden rounded-full p-[1px] ring-1 ring-inset ring-gray-100/10" |
| 46 | initial={{ opacity: 0, scale: 0.5 }} |
| 47 | animate={{ opacity: 1, scale: 1 }} |
| 48 | transition={{ duration: 0.5 }} |
| 49 | whileHover={{ scale: 1.1 }} |
| 50 | whileTap={{ scale: 0.9 }} |
| 51 | > |
| 52 | <span className="absolute inset-[-1000%] animate-discord-button bg-[conic-gradient(from_calc(var(--discord-button-angle)+60deg)_at_calc(50%+var(--discord-button-x))_50%,transparent_50%,#1d0005_98%,transparent_100%)]"></span> |
| 53 | <span className="inline-flex items-center justify-center gap-2 rounded-full bg-black px-3 py-2 text-[12px] font-medium uppercase text-white backdrop-blur"> |
| 54 | <span className="flex items-center gap-2"> |
| 55 | Star On Github |
| 56 | <span className="h-4 w-[1px] bg-gray-200/50"></span>{' '} |
| 57 | <span className="flex items-center tabular-nums"> |
| 58 | <Counter value={stars} /> |
| 59 | <Star |
| 60 | fill="#dba809" |
| 61 | className="ml-2 inline-block h-4 w-4 text-yellow-500" |
| 62 | /> |
| 63 | </span> |
| 64 | </span> |
| 65 | </span> |
| 66 | </motion.a> |
nothing calls this directly
no test coverage detected