1

prisma/components/settings/GithubSection.tsx

@@ -0,0 +1,50 @@
+
+import React, { useState, useEffect } from 'react';
+import { Github, Star } from 'lucide-react';
+
+const GithubSection = ({ isOpen }: { isOpen: boolean }) => {
+  const [stars, setStars] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      fetch('https://api.github.com/repos/yeahhe365/Prisma')
+        .then(res => res.json())
+        .then(data => {
+          if (data && typeof data.stargazers_count === 'number') {
+            setStars(data.stargazers_count);
+          }
+        })
+        .catch(err => console.error("Error fetching stars:", err));
+    }
+  }, [isOpen]);
+
+  return (
+    <div className="border-t border-slate-100 pt-6">
+      <a 
+        href="https://github.com/yeahhe365/Prisma" 
+        target="_blank" 
+        rel="noopener noreferrer"
+        className="flex items-center justify-between p-3 rounded-lg border border-slate-200 bg-slate-50 hover:bg-slate-100 transition-colors group"
+      >
+        <div className="flex items-center gap-3">
+          <div className="p-2 bg-slate-900 text-white rounded-lg group-hover:scale-110 transition-transform">
+            <Github size={18} />
+          </div>
+          <div>
+            <p className="text-sm font-semibold text-slate-800">yeahhe365 / Prisma</p>
+            <p className="text-xs text-slate-500">Open source on GitHub</p>
+          </div>
+        </div>
+        
+        {stars !== null && (
+          <div className="flex items-center gap-1 px-2 py-1 bg-white border border-slate-200 rounded-md shadow-sm">
+            <Star size={14} className="text-amber-500 fill-amber-500" />
+            <span className="text-xs font-bold text-slate-700">{stars.toLocaleString()}</span>
+          </div>
+        )}
+      </a>
+    </div>
+  );
+};
+
+export default GithubSection;