mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-06-10 20:35:17 +02:00
display github starts on header and hamburger menu
This commit is contained in:
parent
8f4ccba59a
commit
525564bd82
3 changed files with 54 additions and 39 deletions
|
|
@ -2,4 +2,6 @@ NEXT_PUBLIC_FASTAPI_BACKEND_URL=http://localhost:8000
|
|||
NEXT_PUBLIC_FASTAPI_BACKEND_AUTH_TYPE=LOCAL or GOOGLE
|
||||
NEXT_PUBLIC_ETL_SERVICE=UNSTRUCTURED or LLAMACLOUD or DOCLING
|
||||
# Contact Form Vars - OPTIONAL
|
||||
DATABASE_URL=postgresql://postgres:[YOUR-PASSWORD]@db.sdsf.supabase.co:5432/postgres
|
||||
DATABASE_URL=postgresql://postgres:[YOUR-PASSWORD]@db.sdsf.supabase.co:5432/postgres
|
||||
NEXT_PUBLIC_GITHUB_REPO=SurfSense
|
||||
NEXT_PUBLIC_GITHUB_OWNER=MODSetter
|
||||
|
|
@ -37,7 +37,7 @@ export const Navbar = () => {
|
|||
|
||||
const DesktopNav = ({ navItems, isScrolled }: any) => {
|
||||
const [hovered, setHovered] = useState<number | null>(null);
|
||||
const {starts : githubStarts} = useGithubStarts();
|
||||
const { compactFormat: githubStarts, loading: loadingGithubStarts } = useGithubStarts();
|
||||
return (
|
||||
<motion.div
|
||||
onMouseLeave={() => {
|
||||
|
|
@ -88,7 +88,13 @@ const DesktopNav = ({ navItems, isScrolled }: any) => {
|
|||
className="hidden rounded-full px-3 py-2 hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors md:flex items-center gap-1.5"
|
||||
>
|
||||
<IconBrandGithub className="h-5 w-5 text-neutral-600 dark:text-neutral-300" />
|
||||
<span className="text-sm font-medium text-neutral-600 dark:text-neutral-300">9.5k</span>
|
||||
{loadingGithubStarts ? (
|
||||
<div className="w-6 h-5 dark:bg-neutral-800 animate-pulse"></div>
|
||||
) : (
|
||||
<span className="text-sm font-medium text-neutral-600 dark:text-neutral-300">
|
||||
{githubStarts}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
<ThemeTogglerComponent />
|
||||
<Link
|
||||
|
|
@ -104,6 +110,7 @@ const DesktopNav = ({ navItems, isScrolled }: any) => {
|
|||
|
||||
const MobileNav = ({ navItems, isScrolled }: any) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const { compactFormat: githubStarts, loading: loadingGithubStarts } = useGithubStarts();
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -162,9 +169,13 @@ const MobileNav = ({ navItems, isScrolled }: any) => {
|
|||
className="flex items-center gap-1.5 rounded-lg px-3 py-2 hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors"
|
||||
>
|
||||
<IconBrandGithub className="h-5 w-5 text-neutral-600 dark:text-neutral-300" />
|
||||
<span className="text-sm font-medium text-neutral-600 dark:text-neutral-300">
|
||||
9.5k
|
||||
</span>
|
||||
{loadingGithubStarts ? (
|
||||
<div className="w-6 h-5 dark:bg-neutral-800 animate-pulse"></div>
|
||||
) : (
|
||||
<span className="text-sm font-medium text-neutral-600 dark:text-neutral-300">
|
||||
{githubStarts}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
</div>
|
||||
<button className="w-full rounded-lg bg-black px-8 py-2 font-medium text-white shadow-[0px_-2px_0px_0px_rgba(255,255,255,0.4)_inset] dark:bg-white dark:text-black">
|
||||
|
|
|
|||
|
|
@ -1,42 +1,44 @@
|
|||
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 [starts, setStarts] = useState<number | null>(null);
|
||||
const [starts, setStarts] = useState<number | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
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) {
|
||||
throw new Error("Missing GitHub credentials");
|
||||
}
|
||||
|
||||
setStarts(response.stargazers_count);
|
||||
} catch (err) {
|
||||
console.error("Error fetching starts:", err);
|
||||
throw err;
|
||||
}
|
||||
};
|
||||
const response = await fetch(`https://api.github.com/repos/${owner}/${repo}`);
|
||||
|
||||
getStarts();
|
||||
}, []);
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch starts: ${response.statusText}`);
|
||||
}
|
||||
|
||||
return {
|
||||
starts,
|
||||
compactFormat: Intl.NumberFormat("en-US", {
|
||||
notation: "compact",
|
||||
}).format(starts || 0),
|
||||
};
|
||||
const data = await response.json();
|
||||
|
||||
setStarts(data?.stargazers_count);
|
||||
} catch (err) {
|
||||
console.error("Error fetching starts:", err);
|
||||
throw err;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
getStarts();
|
||||
}, []);
|
||||
|
||||
return {
|
||||
starts,
|
||||
loading,
|
||||
compactFormat: Intl.NumberFormat("en-US", {
|
||||
notation: "compact",
|
||||
}).format(starts || 0),
|
||||
};
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue