mirror of
https://github.com/Snigdha-OS/Snigdha-OS.github.io.git
synced 2025-09-06 12:45:18 +02:00
⚡️ perf: improve url fetch logic
This commit is contained in:
@@ -14,14 +14,18 @@ export function StatsSection() {
|
|||||||
{ label: "Security Tools", value: "Loading...", icon: Wrench },
|
{ label: "Security Tools", value: "Loading...", icon: Wrench },
|
||||||
{ label: "GitHub Stars", value: "Loading...", icon: Star },
|
{ label: "GitHub Stars", value: "Loading...", icon: Star },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const [error, setError] = useState(false);
|
const [loading, setLoading] = useState(true); // Loading state
|
||||||
|
const [error, setError] = useState<string | null>(null); // Error message
|
||||||
|
|
||||||
const fetchGitHubStats = async (username: string) => {
|
const fetchGitHubStats = async (username: string) => {
|
||||||
try {
|
try {
|
||||||
const userResponse = await fetch(`https://api.github.com/users/${username}`);
|
const userResponse = await fetch(`https://api.github.com/users/${username}`);
|
||||||
const userData = await userResponse.json();
|
const userData = await userResponse.json();
|
||||||
|
|
||||||
|
// Check for invalid response
|
||||||
|
if (userData.message) throw new Error("User not found");
|
||||||
|
|
||||||
const repos = [];
|
const repos = [];
|
||||||
let page = 1;
|
let page = 1;
|
||||||
|
|
||||||
@@ -43,14 +47,16 @@ export function StatsSection() {
|
|||||||
{ label: "Repositories", value: `${repos.length}`, icon: Wrench },
|
{ label: "Repositories", value: `${repos.length}`, icon: Wrench },
|
||||||
{ label: "Stars", value: `${starsCount}`, icon: Star },
|
{ label: "Stars", value: `${starsCount}`, icon: Star },
|
||||||
]);
|
]);
|
||||||
|
setLoading(false);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error fetching GitHub data:", error);
|
console.error("Error fetching GitHub data:", error);
|
||||||
setError(true);
|
setError("Unable to fetch GitHub data. Please try again later.");
|
||||||
|
setLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const username = "Snigdha-OS"; // Replace with the desired GitHub username
|
const username = "Snigdha-OS"; // Replace with desired GitHub username
|
||||||
fetchGitHubStats(username);
|
fetchGitHubStats(username);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
@@ -78,10 +84,10 @@ export function StatsSection() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Stats Grid */}
|
{/* Stats Grid */}
|
||||||
{error ? (
|
{loading ? (
|
||||||
<div className="text-center text-red-500 font-medium">
|
<div className="text-center text-gray-500 font-medium">Loading data...</div>
|
||||||
Unable to fetch data. Please try again later.
|
) : error ? (
|
||||||
</div>
|
<div className="text-center text-red-500 font-medium">{error}</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-12">
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-12">
|
||||||
{stats.map((stat, index) => (
|
{stats.map((stat, index) => (
|
||||||
@@ -95,8 +101,8 @@ export function StatsSection() {
|
|||||||
ease: "easeOut",
|
ease: "easeOut",
|
||||||
}}
|
}}
|
||||||
whileHover={{
|
whileHover={{
|
||||||
scale: 1.1,
|
scale: 1.05,
|
||||||
boxShadow: "0px 20px 40px rgba(0, 0, 0, 0.2)",
|
boxShadow: "0px 20px 40px rgba(0, 0, 0, 0.1)",
|
||||||
}}
|
}}
|
||||||
className="flex flex-col items-center p-8 bg-white rounded-xl shadow-lg hover:shadow-2xl transition-transform duration-300"
|
className="flex flex-col items-center p-8 bg-white rounded-xl shadow-lg hover:shadow-2xl transition-transform duration-300"
|
||||||
>
|
>
|
||||||
|
Reference in New Issue
Block a user