"use client";
import { useState, useEffect } from "react";
import { usePathname } from "next/navigation";
import { Key, BookOpen, User, Plus } from "lucide-react";
function GithubIcon({ className }: { className?: string }) {
return (
);
}
import Link from "next/link";
import { ApiKeyModal } from "@/components/api-key-modal";
import { SignInButton, Show, useAuth } from "@clerk/nextjs";
import { useApiKey } from "@/hooks/use-api-key";
export function Navbar() {
const [showApiModal, setShowApiModal] = useState(false);
const [stars, setStars] = useState("-");
const { isLoaded } = useAuth();
const pathname = usePathname();
const [, setApiKey] = useApiKey();
const handleApiKeySubmit = (key: string) => {
setApiKey(key);
setShowApiModal(false);
};
useEffect(() => {
async function fetchStars() {
try {
const res = await fetch(
"https://api.github.com/repos/nutlope/make-comics",
{
headers: {
Accept: "application/vnd.github+json",
"User-Agent": "make-comics-app",
},
}
);
if (!res.ok) return;
const data = await res.json();
setStars(
typeof data.stargazers_count === "number"
? data.stargazers_count.toLocaleString()
: "-"
);
} catch {
setStars("-");
}
}
fetchStars();
}, []);
const isOnStoriesPage = pathname === "/stories";
if (!isLoaded)
return ;
return (
<>
setShowApiModal(false)}
onSubmit={handleApiKeySubmit}
/>
);
}