From 331d350c1501ced28119c434734591d2d87aa9cc Mon Sep 17 00:00:00 2001
From: Rohit Ghumare <48523873+rohitg00@users.noreply.github.com>
Date: Sat, 7 Feb 2026 13:47:07 +0000
Subject: [PATCH] fix: use PH embed badge image with live upvote count

---
 docs/skillkit/App.tsx           | 21 +++++++--------------
 docs/skillkit/hooks/useStats.ts | 24 ++----------------------
 2 files changed, 9 insertions(+), 36 deletions(-)

diff --git a/docs/skillkit/App.tsx b/docs/skillkit/App.tsx
index b003567b..03419bde 100644
--- a/docs/skillkit/App.tsx
+++ b/docs/skillkit/App.tsx
@@ -174,21 +174,14 @@ export default function App(): React.ReactElement {
                 href="https://www.producthunt.com/products/skillkit-2?embed=true&utm_source=badge-featured&utm_medium=badge&utm_campaign=badge-skillkit-2"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="hidden sm:flex items-center gap-1.5 text-zinc-500 hover:text-white transition-colors group"
+                className="hidden sm:inline-flex items-center hover:opacity-80 transition-opacity"
               >
-                <svg className="w-3 h-3 text-[#da552f] group-hover:text-[#ff6154]" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M13.604 8.4h-3.405V12h3.405a1.8 1.8 0 0 0 0-3.6zM12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zm1.604 14.4h-3.405V18H7.801V6h5.804a4.2 4.2 0 0 1 0 8.4z"/>
-                </svg>
-                <span className="text-zinc-400 group-hover:text-white font-medium">Featured</span>
-                {stats.phUpvotes > 0 && (
-                  <>
-                    <span className="text-zinc-700 mx-0.5">·</span>
-                    <svg className="w-3 h-3 text-[#da552f]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 15l7-7 7 7" />
-                    </svg>
-                    <span className="text-white font-medium">{stats.phUpvotes}</span>
-                  </>
-                )}
+                <img
+                  src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1071813&theme=dark"
+                  alt="SkillKit on Product Hunt"
+                  height="28"
+                  style={{ height: '28px', width: 'auto' }}
+                />
               </a>
             </div>
           </div>
diff --git a/docs/skillkit/hooks/useStats.ts b/docs/skillkit/hooks/useStats.ts
index 9775699e..b9d4d61c 100644
--- a/docs/skillkit/hooks/useStats.ts
+++ b/docs/skillkit/hooks/useStats.ts
@@ -4,7 +4,6 @@ interface Stats {
   version: string;
   downloads: string;
   stars: number;
-  phUpvotes: number;
   loading: boolean;
 }
 
@@ -58,7 +57,6 @@ export function useStats(): Stats {
     version: '1.9.0',
     downloads: '2.4k',
     stars: 66,
-    phUpvotes: 0,
     loading: true,
   });
 
@@ -71,19 +69,13 @@ export function useStats(): Stats {
 
     async function fetchStats(): Promise<void> {
       try {
-        const [npmResponse, githubResponse, phResponse] = await Promise.allSettled([
+        const [npmResponse, githubResponse] = await Promise.allSettled([
           fetch('https://api.npmjs.org/downloads/point/last-month/skillkit'),
           fetch('https://api.github.com/repos/rohitg00/skillkit'),
-          fetch('https://api.producthunt.com/v2/api/graphql', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ query: '{ post(slug: "skillkit-2") { votesCount } }' }),
-          }),
         ]);
 
         let downloads = '2.4k';
         let stars = 66;
-        let phUpvotes = 0;
         let version = '1.9.0';
 
         if (npmResponse.status === 'fulfilled' && npmResponse.value.ok) {
@@ -100,18 +92,6 @@ export function useStats(): Stats {
           }
         }
 
-        if (phResponse.status === 'fulfilled' && phResponse.value.ok) {
-          try {
-            const phData = await phResponse.value.json();
-            const votes = phData?.data?.post?.votesCount;
-            if (typeof votes === 'number' && Number.isFinite(votes)) {
-              phUpvotes = votes;
-            }
-          } catch {
-            // PH API may require auth, fall back silently
-          }
-        }
-
         try {
           const registryResponse = await fetch('https://registry.npmjs.org/skillkit/latest');
           if (registryResponse.ok) {
@@ -124,7 +104,7 @@ export function useStats(): Stats {
           // Use default version
         }
 
-        const newStats = { version, downloads, stars, phUpvotes };
+        const newStats = { version, downloads, stars };
         setCachedStats(newStats);
         setStats({ ...newStats, loading: false });
       } catch {