47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import { cn } from "@/lib/utils";
|
|
import { Github } from "lucide-react";
|
|
import { useGitHubStars } from "@/hooks/use-github-stars";
|
|
import { formatCount } from "@/lib/format-count";
|
|
|
|
interface GitHubStarButtonProps {
|
|
repo?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const GitHubStarButton = React.forwardRef<
|
|
HTMLAnchorElement,
|
|
GitHubStarButtonProps
|
|
>(({ repo = "phact/openrag", className }, ref) => {
|
|
const { data, isLoading, error } = useGitHubStars(repo);
|
|
|
|
return (
|
|
<a
|
|
ref={ref}
|
|
href={`https://github.com/${repo}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={cn(
|
|
"inline-flex h-8 items-center justify-center rounded-md px-2 text-sm font-medium text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
className,
|
|
)}
|
|
>
|
|
<Github className="h-4 w-4" />
|
|
<span className="hidden sm:inline ml-2">
|
|
{isLoading
|
|
? "..."
|
|
: error
|
|
? "--"
|
|
: data
|
|
? formatCount(data.stargazers_count)
|
|
: "--"}
|
|
</span>
|
|
</a>
|
|
);
|
|
});
|
|
|
|
GitHubStarButton.displayName = "GitHubStarButton";
|
|
|
|
export { GitHubStarButton };
|