51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
|
|
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;
|