stars uploaded

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 bitc0de
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

components/Navbar.tsx

@@ -3,12 +3,52 @@
 import { usePathname } from 'next/navigation'
 import Link from 'next/link'
 import { Home, ListMusic, Github, Star } from 'lucide-react'
+import { useEffect, useState } from 'react'
 
 export default function Navbar() {
   const pathname = usePathname()
+  const [stars, setStars] = useState<number | null>(null)
 
   const isActive = (path: string) => pathname === path
 
+  useEffect(() => {
+    const fetchStars = () => {
+      fetch('https://api.github.com/repos/bitc0de/bitify')
+        .then(res => res.json())
+        .then(data => {
+          if (data.stargazers_count !== undefined) {
+            setStars(data.stargazers_count)
+          }
+        })
+        .catch((err) => {
+          console.error('Error fetching stars:', err)
+          setStars(null)
+        })
+    }
+
+    fetchStars()
+
+    // Refresh when user comes back to the tab
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        fetchStars()
+      }
+    }
+
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange)
+    }
+  }, [])
+
+  const formatStars = (count: number) => {
+    if (count >= 1000) {
+      return `${(count / 1000).toFixed(1)}k`
+    }
+    return count.toString()
+  }
+
   return (
     <nav className="bg-gray-900 border-b border-gray-800 sticky top-0 z-40 flex-shrink-0">
       <div className="px-3 sm:px-6 lg:px-8">
@@ -63,7 +103,7 @@ export default function Navbar() {
 
           {/* GitHub Stars Badge */}
           <a
-            href="https://github.com/vercel/next.js"
+            href="https://github.com/bitc0de/bitify"
             target="_blank"
             rel="noopener noreferrer"
             className="flex items-center gap-1.5 px-2 sm:px-4 py-1.5 sm:py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300 hover:text-white"
@@ -71,7 +111,9 @@ export default function Navbar() {
             <Github size={16} className="sm:w-5 sm:h-5" />
             <span className="text-xs sm:text-sm font-medium hidden xs:inline">Star</span>
             <Star size={12} className="fill-yellow-400 text-yellow-400 sm:w-4 sm:h-4" />
-            <span className="text-xs sm:text-sm font-semibold">120k</span>
+            {stars !== null && (
+              <span className="text-xs sm:text-sm font-semibold">{formatStars(stars)}</span>
+            )}
           </a>
         </div>