add compact formatting eg : 2.3k

This commit is contained in:
CREDO23 2025-10-17 14:31:10 +02:00
parent 8007597b50
commit 8f4ccba59a
2 changed files with 34 additions and 27 deletions

View file

@ -6,6 +6,7 @@ import React, { useEffect, useState } from "react";
import { Logo } from "@/components/Logo";
import { ThemeTogglerComponent } from "@/components/theme/theme-toggle";
import { cn } from "@/lib/utils";
import { useGithubStarts } from "@/hooks/use-github-starts";
export const Navbar = () => {
const [isScrolled, setIsScrolled] = useState(false);
@ -36,6 +37,7 @@ export const Navbar = () => {
const DesktopNav = ({ navItems, isScrolled }: any) => {
const [hovered, setHovered] = useState<number | null>(null);
const {starts : githubStarts} = useGithubStarts();
return (
<motion.div
onMouseLeave={() => {

View file

@ -2,36 +2,41 @@ import { useCallback, useEffect, useState } from "react";
import { apiClient } from "@/lib/api";
export const useGithubStarts = () => {
const repo = process.env.NEXT_PUBLIC_GITHUB_REPO;
const owner = process.env.NEXT_PUBLIC_GITHUB_OWNER;
const token = process.env.NEXT_PUBLIC_GITHUB_TOKEN;
const repo = process.env.NEXT_PUBLIC_GITHUB_REPO;
const owner = process.env.NEXT_PUBLIC_GITHUB_OWNER;
const token = process.env.NEXT_PUBLIC_GITHUB_TOKEN;
const [starts, setStarts] = useState<number | null>(null);
const [starts, setStarts] = useState<number | null>(null);
useEffect(() => {
const getStarts = async () => {
try {
if (!repo || !owner || !token) {
throw new Error("Missing GitHub credentials");
}
const response = await apiClient.get<{ stargazers_count: number }>(
`https://api.github.com/repos/${owner}/${repo}`,
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
useEffect(() => {
const getStarts = async () => {
try {
if (!repo || !owner || !token) {
throw new Error("Missing GitHub credentials");
}
const response = await apiClient.get<{ stargazers_count: number }>(
`https://api.github.com/repos/${owner}/${repo}`,
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
setStarts(response.stargazers_count);
} catch (err) {
console.error("Error fetching starts:", err);
throw err;
}
};
setStarts(response.stargazers_count);
} catch (err) {
console.error("Error fetching starts:", err);
throw err;
}
};
getStarts();
}, []);
getStarts();
}, []);
return { starts };
return {
starts,
compactFormat: Intl.NumberFormat("en-US", {
notation: "compact",
}).format(starts || 0),
};
};