🚀 feat(_followers): add github follower count

removed gitlab and dev.to
Snigdha-OS · Dec 7, 2024 · 1aeedee · 1aeedee
1 parent 0129e33
commit 1aeedee
Show file tree

Hide file tree

Showing 2 changed files with 170 additions and 90 deletions.
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -1,7 +1,34 @@
-// import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Github, Gitlab } from 'lucide-react';
 
 export function Footer() {
+  const [githubFollowers, setGithubFollowers] = useState<number | null>(null);
+  const [gitlabFollowers, setGitlabFollowers] = useState<number | null>(null);
+
+  // Fetch GitHub follower count
+  useEffect(() => {
+    async function fetchGithubFollowers() {
+      const response = await fetch('https://api.github.com/users/Snigdha-OS');
+      const data = await response.json();
+      if (data.followers !== undefined) {
+        setGithubFollowers(data.followers);
+      }
+    }
+    fetchGithubFollowers();
+  }, []);
+
+  // Fetch GitLab follower count
+  useEffect(() => {
+    async function fetchGitlabFollowers() {
+      const response = await fetch('https://gitlab.com/api/v4/users/Snigdha-OS');
+      const data = await response.json();
+      if (data[0]?.followers_count !== undefined) {
+        setGitlabFollowers(data[0].followers_count);
+      }
+    }
+    fetchGitlabFollowers();
+  }, []);
+
   return (
     <footer className="bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 text-white py-10">
       <div className="container mx-auto px-6">
@@ -10,7 +37,7 @@ export function Footer() {
           <div>
             <h3 className="font-extrabold text-lg mb-4">Snigdha OS</h3>
             <p className="text-sm text-gray-400 leading-relaxed">
-            Arch based Linux Distribution for Penetration Testing and Ethical Hacking!
+              Arch based Linux Distribution for Penetration Testing and Ethical Hacking!
             </p>
           </div>
 
@@ -25,7 +52,7 @@ export function Footer() {
               </li>
               <li>
                 <a href="https://forum.snigdhaos.org/" className="hover:text-indigo-400 transition-colors">
-                  Forums<sup> maintainance!</sup>
+                  Forums<sup> maintenance!</sup>
                 </a>
               </li>
               <li>
@@ -46,7 +73,7 @@ export function Footer() {
                   className="hover:text-indigo-400 transition-colors"
                 >
                   Installation Guide <sup>
-                    <a href='https://snigdha-os.github.io/documentation/category/installation'>git-version</a> 
+                    <a href="https://snigdha-os.github.io/documentation/category/installation">git-version</a>
                   </sup>
                 </a>
               </li>
@@ -73,23 +100,44 @@ export function Footer() {
           <div>
             <h3 className="font-extrabold text-lg mb-4">Connect</h3>
             <div className="flex space-x-5">
-              <a
-                href="https://github.com/Snigdha-OS"
-                className="hover:text-indigo-400 transition-all"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <Github className="h-7 w-7" />
-              </a>
-              <a
-                href="https://gitlab.com/Snigdha-OS"
-                className="hover:text-indigo-400 transition-all"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <Gitlab className="h-7 w-7" />
-              </a>
-              <a
+              {/* GitHub Follower Count Card */}
+              <div className="bg-gray-800 p-4 rounded-lg shadow-lg flex items-center space-x-3">
+                <a
+                  href="https://github.com/Snigdha-OS"
+                  className="hover:text-indigo-400 transition-all"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Github className="h-7 w-7 text-white" />
+                </a>
+                {githubFollowers !== null && (
+                  <div className="text-white">
+                    <span className="block text-sm">Followers</span>
+                    <span className="text-lg font-bold">{githubFollowers}</span>
+                  </div>
+                )}
+              </div>
+
+              {/* GitLab Follower Count Card */}
+              {/* <div className="bg-gray-800 p-4 rounded-lg shadow-lg flex items-center space-x-3">
+                <a
+                  href="https://gitlab.com/Snigdha-OS"
+                  className="hover:text-indigo-400 transition-all"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Gitlab className="h-7 w-7 text-white" />
+                </a>
+                {gitlabFollowers !== null && (
+                  <div className="text-white">
+                    <span className="block text-sm">Followers</span>
+                    <span className="text-lg font-bold">{gitlabFollowers}</span>
+                  </div>
+                )}
+              </div> */}
+
+              {/* Dev.to (No follower count, placeholder) */}
+              {/* <a
                 href="https://dev.to/SnigdhaOS"
                 className="hover:text-indigo-400 transition-all"
                 target="_blank"
@@ -102,7 +150,7 @@ export function Footer() {
                 >
                   <path d="M0 2.7v34.6c0 1.5.6 2.9 1.6 3.9 1 1 2.4 1.6 3.9 1.6h38.9c1.5 0 2.9-.6 3.9-1.6 1-1 1.6-2.4 1.6-3.9V2.7c0-1.5-.6-2.9-1.6-3.9-1-1-2.4-1.6-3.9-1.6H5.5c-1.5 0-2.9.6-3.9 1.6C.6-.2 0 1.2 0 2.7zm21.8 26.7h-3.9V10.6h3.9v18.8zm8.5 0h-3.3l-2.2-6.6h-1.5v6.6h-3.9V10.6h5.5c.7 0 1.3.1 1.9.4s1 .6 1.4 1.1.7 1 .9 1.7c.2.6.3 1.3.3 2v2.6c0 .7-.1 1.4-.3 2s-.5 1.1-.9 1.6c-.4.5-.8.8-1.4 1.1-.6.2-1.2.4-1.9.4h-1.6l2 6.3h2.4l3.5-6.3v6.3zm9.5 0h-3.9v-6.6h-5.6v6.6h-3.9V10.6h3.9v6.2h5.6v-6.2h3.9v18.8z" />
                 </svg>
-              </a>
+              </a> */}
             </div>
           </div>
         </div>