Skip to content

chore: github button in navbar #1101

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ameer2468 merged 3 commits into from
Sep 30, 2025
Merged

chore: github button in navbar #1101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7aa7f78
add github button
ameer2468 Sep 30, 2025
eee5ecc
cleanup
ameer2468 Sep 30, 2025
0d6e2b6
type
ameer2468 Sep 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 25 additions & 8 deletions apps/web/app/(site)/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

import {
Button,
ListItem,
Logo,
NavigationMenu,
NavigationMenuContent,
Expand All @@ -15,6 +14,7 @@ import {
import { classNames } from "@cap/utils";
import { Clapperboard, Zap } from "lucide-react";
import { motion } from "motion/react";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Suspense, use, useEffect, useState } from "react";
Expand Down Expand Up @@ -131,8 +131,8 @@ export const Navbar = () => {

return (
<>
<header className="fixed top-4 left-0 right-0 z-[51] md:top-10 animate-in fade-in slide-in-from-top-4 duration-500">
<nav className="p-2 mx-auto w-full max-w-[calc(100%-20px)] bg-white rounded-full border backdrop-blur-md md:max-w-fit border-zinc-200 h-fit">
<header className="fixed top-4 left-0 right-0 z-[51] lg:top-10 animate-in fade-in slide-in-from-top-4 duration-500">
<nav className="p-2 mx-auto w-full max-w-[calc(100%-20px)] bg-white rounded-full border backdrop-blur-md lg:max-w-fit border-zinc-200 h-fit">
<div className="flex gap-12 justify-between items-center mx-auto max-w-4xl h-full transition-all">
<div className="flex items-center">
<Link passHref href="/home">
Expand All @@ -146,7 +146,7 @@ export const Navbar = () => {
}}
/>
</Link>
<div className="hidden md:flex">
<div className="hidden lg:flex">
<NavigationMenu>
<NavigationMenuList className="space-x-0">
{Links.map((link) => (
Expand All @@ -169,9 +169,9 @@ export const Navbar = () => {
href={sublink.href}
className="block p-3 space-y-1 leading-none no-underline rounded-md transition-all duration-200 outline-none select-none hover:bg-gray-2 hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
>
<div className="flex items-center gap-2 text-base font-medium leading-none transition-colors duration-200 text-zinc-700 group-hover:text-zinc-900">
<div className="flex gap-2 items-center text-base font-medium leading-none transition-colors duration-200 text-zinc-700 group-hover:text-zinc-900">
{sublink.icon && sublink.icon}
<span className="text-gray-12 font-semibold">
<span className="font-semibold text-gray-12">
{sublink.label}
</span>
</div>
Expand Down Expand Up @@ -206,7 +206,24 @@ export const Navbar = () => {
</NavigationMenu>
</div>
</div>
<div className="hidden items-center space-x-2 md:flex">
<div className="hidden items-center space-x-2 lg:flex">
<Button
variant="outline"
icon={
<Image
src="/github.svg"
alt="Github"
width={16}
height={16}
/>
}
target="_blank"
href="https://github.com/CapSoftware/Cap"
size="sm"
className="w-full font-medium sm:w-auto"
>
Github
</Button>
Comment on lines +210 to +226
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Remove invalid target prop to fix type error.

The target="_blank" prop on line 220 is not valid for the Button component. While Button renders as an anchor when href is provided, ButtonProps only extends ButtonHTMLAttributes<HTMLButtonElement>, not AnchorHTMLAttributes<HTMLAnchorElement>.

Apply this diff to remove the invalid prop:

 <Button
   variant="outline"
   icon={
     <Image
       src="/github.svg"
       alt="Github"
       width={16}
       height={16}
     />
   }
-  target="_blank"
   href="/CapSoftware/Cap"
   size="sm"
   className="w-full font-medium sm:w-auto"
 >
   Github
 </Button>

Alternatively, if opening in a new tab is required, the Button component's type definition should be updated to conditionally include anchor attributes when href is present.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Button
variant="outline"
icon={
<Image
src="/github.svg"
alt="Github"
width={16}
height={16}
/>
}
target="_blank"
href="https://github.com/CapSoftware/Cap"
size="sm"
className="w-full font-medium sm:w-auto"
>
Github
</Button>
<Button
variant="outline"
icon={
<Image
src="/github.svg"
alt="Github"
width={16}
height={16}
/>
}
href="https://github.com/CapSoftware/Cap"
size="sm"
className="w-full font-medium sm:w-auto"
>
Github
</Button>
🧰 Tools
🪛 GitHub Check: Typecheck

[failure] 220-220:
Type '{ children: string; variant: "outline"; icon: Element; target: string; href: string; size: "sm"; className: string; }' is not assignable to type 'IntrinsicAttributes & ButtonProps & RefAttributes'.

🤖 Prompt for AI Agents 
In apps/web/app/(site)/Navbar.tsx around lines 210 to 226, the Button usage
includes an invalid target="_blank" prop (line ~220) because ButtonProps extend
button attributes, not anchor attributes; remove the target="_blank" prop from
this Button invocation to fix the type error; if opening in a new tab is
required instead, either render a plain <a> with the href and target/rel
attributes or update the Button component's type definition to conditionally
include AnchorHTMLAttributes when href is provided and ensure rel="noopener
noreferrer" is added when using target="_blank".

<Suspense
fallback={
<Button
Expand Down Expand Up @@ -234,7 +251,7 @@ export const Navbar = () => {
</div>
<button
type="button"
className="flex md:hidden"
className="flex lg:hidden"
onClick={() => setShowMobileMenu(!showMobileMenu)}
>
<div className="flex flex-col gap-[5px] mr-1">
Expand Down
3 changes: 1 addition & 2 deletions apps/web/components/ui/MobileMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,8 @@ const externalLinks: NavLink[] = [
];

const MobileMenu: React.FC<MobileMenuProps> = ({ setShowMobileMenu, auth }) => {
console.log(auth, "auth");
return (
<div className="block overflow-auto fixed top-0 left-0 z-40 px-4 w-full h-full bg-gray-2 md:hidden">
<div className="block overflow-auto fixed top-0 left-0 z-40 px-4 w-full h-full bg-gray-2">
<div className="pb-12">
<nav className="relative mt-24 mobile">
<ul className="p-0 space-y-4">
Expand Down
1 change: 1 addition & 0 deletions apps/web/public/github.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 4 additions & 1 deletion packages/ui/src/components/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const buttonVariants = cva(
destructive:
"bg-red-500 text-white hover:bg-red-600 disabled:bg-red-200",
outline:
"border border-gray-4 hover:border-gray-12 hover:bg-gray-12 hover:text-gray-1 text-gray-12 disabled:bg-gray-8",
"border border-gray-4 hover:border-gray-5 hover:bg-gray-3 text-gray-12 disabled:bg-gray-8",
white:
"bg-gray-1 border border-gray-5 text-gray-12 hover:bg-gray-3 disabled:bg-gray-8",
ghost: "hover:bg-white/20 hover:text-white",
Expand Down Expand Up @@ -49,6 +49,7 @@ export interface ButtonProps
href?: string;
kbd?: string;
icon?: React.ReactNode;
target?: string;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
Expand All @@ -62,6 +63,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
href,
kbd,
icon,
target,
...props
},
ref,
Expand All @@ -71,6 +73,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
<Comp
className={classNames(buttonVariants({ variant, size, className }))}
ref={ref as any}
target={target || undefined}
href={href || undefined}
{...props}
>
Expand Down