83 lines
3 KiB
TypeScript
83 lines
3 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { User } from "@supabase/supabase-js";
|
|
import Link from "next/link";
|
|
import { businessDemoLink, githubPublicLink } from "@/lib/data";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { NavbarDropdownMenu } from "./NavbarDropdownMenu";
|
|
import { FaGithub } from "react-icons/fa";
|
|
import PremiumBadge from "../PremiumBadge";
|
|
import { useMediaQuery } from "@/hooks/useMediaQuery";
|
|
import { usePathname } from "next/navigation";
|
|
import GetInTouchButton from "../GetInTouch";
|
|
import { CalendarCheck } from "lucide-react";
|
|
|
|
interface NavbarButtonsProps {
|
|
user: IUser | null;
|
|
stars: number | null;
|
|
isHome: boolean;
|
|
}
|
|
|
|
const NavbarButtons: React.FC<NavbarButtonsProps> = ({
|
|
user,
|
|
stars,
|
|
isHome,
|
|
}) => {
|
|
const isMobile = useMediaQuery("(max-width: 768px)");
|
|
|
|
return (
|
|
<div
|
|
className={`flex flex-row sm:gap-2 ${
|
|
isHome ? "gap-2" : ""
|
|
} items-center font-bold text-sm `}
|
|
>
|
|
{isHome && user && (
|
|
<div>
|
|
<PremiumBadge currentUserId={user.user_id} />
|
|
</div>
|
|
)}
|
|
{!isHome && (
|
|
<Link
|
|
href={githubPublicLink}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
title="Visit our GitHub"
|
|
className="ml-4"
|
|
// className="bg-nav-bar rounded-full px-3"
|
|
>
|
|
<Button
|
|
size="sm"
|
|
variant={isMobile ? "ghost" : "outline"}
|
|
className="flex bg-nav-bar border-0 sm:mr-2 sm:border flex-row gap-2 items-center rounded-full"
|
|
>
|
|
<FaGithub className="text-xl" />
|
|
<p className="hidden sm:flex font-normal">GitHub</p>
|
|
<Separator
|
|
orientation="vertical"
|
|
className="hidden sm:flex"
|
|
/>
|
|
<p className="hidden sm:flex text-xs font-normal">
|
|
{stars?.toLocaleString() ?? 347}
|
|
</p>
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
{!isHome && !isMobile && (
|
|
<Link href={businessDemoLink} passHref tabIndex={-1}>
|
|
<Button
|
|
size="sm"
|
|
variant="secondary"
|
|
className="flex flex-row gap-2 items-center rounded-full bg-nav-bar focus:shadow-none focus-visible:shadow-none"
|
|
>
|
|
<CalendarCheck size={20} />
|
|
<span className="hidden sm:flex font-normal">
|
|
Business demo
|
|
</span>
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
<NavbarDropdownMenu user={user} stars={stars} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NavbarButtons;
|