feat(minor): add github stars count

apps/www/app/(app)/page.tsx

@@ -2,6 +2,7 @@ import Link from "next/link"
 import { IceCream } from "lucide-react"
 
 import { siteConfig } from "@/config/site"
+import { ghStars } from "@/lib/fetchGhStars"
 import { cn } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
 import { buttonVariants } from "@/components/ui/button"
@@ -19,6 +20,7 @@ import { TemplateGrid } from "@/components/landing/template-grid"
 import { PageActions, PageHeader } from "@/components/page-header"
 
 export default function IndexPage() {
+  const stars = ghStars()
   return (
     <div className=" isolate min-h-screen overflow-hidden  pb-8 sm:pb-12 md:pb-0">
       <div className="container relative pt-12 md:pt-8">
@@ -62,7 +64,7 @@ export default function IndexPage() {
               )}
             >
               <Icons.gitHub className="mr-2 h-5 w-5" />
-              GitHub
+              GitHub {stars || "2.3k"}+
             </Link>
           </PageActions>
         </PageHeader>

apps/www/app/(app)/themes/cards/create-account.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { ghStars } from "@/lib/fetchGhStars"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
@@ -14,6 +15,8 @@ import {
 } from "@/registry/default/ui/texture-card"
 
 export function CardsCreateAccount() {
+  const stars = ghStars()
+
   return (
     <TextureCard>
       <TextureCardHeader className="space-y-1 px-2">
@@ -29,6 +32,7 @@ export function CardsCreateAccount() {
           <Button variant="outline">
             <Icons.gitHub className="mr-2 h-4 w-4" />
             Github
+            {stars}
           </Button>
           <Button variant="outline">
             <Icons.google className="mr-2 h-4 w-4" />

apps/www/components/site-footer.tsx

@@ -1,6 +1,9 @@
 import { siteConfig } from "@/config/site"
+import { ghStars } from "@/lib/fetchGhStars"
 
 export function SiteFooter() {
+  const stars = ghStars()
+
   return (
     <footer className="py-6 md:px-8 md:py-0">
       <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
@@ -21,9 +24,8 @@ export function SiteFooter() {
             rel="noreferrer"
             className="font-medium underline underline-offset-4"
           >
-            GitHub
+            GitHub {stars}+
           </a>
-          .
         </p>
       </div>
     </footer>

apps/www/components/site-header.tsx

@@ -4,6 +4,7 @@ import Link from "next/link"
 import { usePathname } from "next/navigation"
 
 import { siteConfig } from "@/config/site"
+import { ghStars } from "@/lib/fetchGhStars"
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 // import { AlertBanner } from "@/components/alert-banner"
@@ -17,6 +18,8 @@ import { DistortedGlass } from "./distorted-glass"
 
 export function SiteHeader() {
   let pathname = usePathname()
+  const stars = ghStars()
+
   return (
     <>
       {/* <AlertBanner /> */}
@@ -42,7 +45,7 @@ export function SiteHeader() {
               <CommandMenu />
             </div> */}
             <nav className="flex items-center ">
-              <Link
+              {/* <Link
                 href={siteConfig.links.github}
                 target="_blank"
                 rel="noreferrer"
@@ -52,12 +55,24 @@ export function SiteHeader() {
                     buttonVariants({
                       variant: "ghost",
                     }),
-                    "w-9 px-0"
+                    "w-auto px-0"
                   )}
                 >
                   <Icons.gitHub className="h-4 w-4" />
-                  <span className="sr-only">GitHub</span>
+                  <span className="sr-only">GitHub {stars || "2.3k+"}</span>
                 </div>
+              </Link> */}
+              <Link
+                target="_blank"
+                rel="noreferrer"
+                href={siteConfig.links.github}
+                className={cn(
+                  buttonVariants({ variant: "outline", size: "sm" }),
+                  "  rounded-xl transition-all hover:bg-muted/50"
+                )}
+              >
+                <Icons.gitHub className="mr-1 h-auto w-5" />
+                {stars || "2.3k"}+
               </Link>
               <Link
                 href={siteConfig.links.twitter}

apps/www/lib/fetchGhStars.ts

@@ -0,0 +1,27 @@
+// This is a SERVER component (no hooks needed)
+
+async function getStars(): Promise<string> {
+  const res = await fetch("https://api.github.com/repos/nolly-studio/cult-ui", {
+    // Cache for 1 hour (3600 seconds)
+    next: { revalidate: 3600 },
+  })
+
+  const data = await res.json()
+  const count = data.stargazers_count
+
+  if (count >= 1_000_000)
+    return (count / 1_000_000).toFixed(1).replace(/\.0$/, "") + "M"
+  if (count >= 1_000)
+    return (count / 1_000).toFixed(1).replace(/\.0$/, "") + "k"
+  return count.toString()
+}
+
+export async function ghStars() {
+  const stars = await getStars()
+  return stars
+}
+
+// export default async function GitHubStars() {
+
+//   return <div>⭐ GitHub Stars: {stars}</div>
+// }

apps/www/lib/utils.ts

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
 

apps/www/registry/default/example/texture-card-demo.tsx

@@ -2,6 +2,7 @@
 
 import { ArrowRight, Merge } from "lucide-react"
 
+import { ghStars } from "@/lib/fetchGhStars"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { TextureButton } from "@/registry/default/ui/texture-button"
@@ -15,6 +16,8 @@ import {
 } from "@/registry/default/ui/texture-card"
 
 export default function TextureCardDemo() {
+  const stars = ghStars()
+
   return (
     <div className="flex items-center justify-center py-4">
       <div className="dark:bg-stone-950  h-full    rounded-md">
@@ -80,6 +83,7 @@ export default function TextureCardDemo() {
                         />
                       </svg>
                       <span className="pl-2">Github</span>
+                      {stars}
                     </TextureButton>
                   </div>
                   <div className="text-center text-sm mb-4">or</div>