Merge pull request #427 from birobirobiro/new-sponsor

feat: add sponsors and improve header with GitHub stars

Author: birobirobiro

README.md

@@ -17,6 +17,9 @@
   <a href="https://shadcnstudio.com/?utm_source=awesome-shadcn-ui&utm_medium=banner&utm_campaign=github" target="_blank">
     <img src="public/sponsors/shadcnstudio.svg" alt="shadcnstudio.com" width="32">
   </a>
+  <a href="https://www.shadcnblocks.com" target="_blank">
+    <img src="public/sponsors/shadcnblocks.svg" alt="shadcnblocks.com" width="32">
+  </a>
 </p>
 
 <p align="center">

public/BuyMyACoffee.svg

@@ -3,6 +3,7 @@ import { Header } from "@/components/layout/header";
 import { Providers } from "@/providers/providers";
 import { type Metadata, type Viewport } from "next";
 import { GoogleAnalytics } from "@next/third-parties/google";
+import { TooltipProvider } from "@/components/ui/tooltip";
 
 import type React from "react";
 import { Suspense } from "react";
@@ -94,13 +95,15 @@ export default function RootLayout({
       >
         <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID || ""} />
         <Providers>
-          <Suspense>
-            <div className="relative flex min-h-screen flex-col">
-              <Header />
-              <main className="flex-1">{children}</main>
-              <Footer />
-            </div>
-          </Suspense>
+          <TooltipProvider>
+            <Suspense>
+              <div className="relative flex min-h-screen flex-col">
+                <Header />
+                <main className="flex-1">{children}</main>
+                <Footer />
+              </div>
+            </Suspense>
+          </TooltipProvider>
         </Providers>
       </body>
     </html>

public/logo-mobile.svg

@@ -0,0 +1,28 @@
+"use client";
+
+import { Octokit } from "@octokit/rest";
+import { useEffect, useState } from "react";
+
+async function getStars() {
+  const octokit = new Octokit();
+  const { data } = await octokit.repos.get({
+    owner: "birobirobiro",
+    repo: "awesome-shadcn-ui",
+  });
+  return data.stargazers_count;
+}
+
+export function GithubStars() {
+  const [stars, setStars] = useState<number | null>(null);
+
+  useEffect(() => {
+    getStars().then(setStars);
+  }, []);
+
+  if (stars === null) return null;
+
+  const formattedStars =
+    stars >= 1000 ? `${(stars / 1000).toFixed(1)}k` : stars;
+
+  return <span className="text-sm">{formattedStars}</span>;
+}

public/sponsors/shadcnblocks.svg

@@ -8,6 +8,7 @@ import { motion, useInView } from "motion/react";
 import Link from "next/link";
 import { useRef } from "react";
 import { Button } from "../ui/button";
+import { GithubStars } from "@/components/github-stars";
 
 export function Footer() {
   const { categories } = useCategories();
@@ -137,7 +138,7 @@ export function Footer() {
           <motion.div variants={itemVariants}>
             <h4 className="font-semibold mb-4">Connect</h4>
             <div className="space-y-4">
-              <div className="flex gap-3">
+              <div className="flex gap-3 items-center">
                 {socialLinks.map((social) => (
                   <div key={social.name} className="flex items-center gap-2">
                     <Button variant="outline" size="icon" asChild>
@@ -149,16 +150,13 @@ export function Footer() {
                         <social.icon className="h-5 w-5 text-muted-foreground group-hover:text-foreground transition-colors" />
                       </a>
                     </Button>
-                    <span className="text-xs text-muted-foreground">
-                      {social.name}
-                    </span>
+                    <GithubStars />
                   </div>
                 ))}
               </div>
 
               <div className="flex items-center gap-2">
                 <ThemeSwitcher />
-                <span className="text-xs text-muted-foreground">Theme</span>
               </div>
             </div>
           </motion.div>