137 lines
4.1 KiB
TypeScript
137 lines
4.1 KiB
TypeScript
import {
|
|
Navbar as NextUINavbar,
|
|
NavbarContent,
|
|
NavbarMenu,
|
|
NavbarMenuToggle,
|
|
NavbarBrand,
|
|
NavbarItem,
|
|
NavbarMenuItem,
|
|
Kbd,
|
|
Link,
|
|
Input,
|
|
link as linkStyles,
|
|
} from "@nextui-org/react";
|
|
|
|
import { siteConfig } from "@/config/site";
|
|
import NextLink from "next/link";
|
|
|
|
import { ThemeSwitch } from "@/components/theme-switch";
|
|
import { GithubIcon, SearchIcon } from "@/components/icons";
|
|
|
|
import Image from "next/image";
|
|
|
|
export const Navbar = () => {
|
|
const searchInput = (
|
|
<Input
|
|
aria-label="Search"
|
|
classNames={{
|
|
inputWrapper: "bg-default-100",
|
|
input: "text-sm",
|
|
}}
|
|
endContent={
|
|
<Kbd className="hidden lg:inline-block" keys={["command"]}>
|
|
K
|
|
</Kbd>
|
|
}
|
|
labelPlacement="outside"
|
|
placeholder="Search..."
|
|
startContent={
|
|
<SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
|
|
}
|
|
type="search"
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<NextUINavbar maxWidth="xl" position="sticky" className="bg-inherit">
|
|
<NavbarContent className="basis-1/5 sm:basis-full" justify="start">
|
|
<NavbarBrand as="li" className="gap-3 max-w-fit">
|
|
<NextLink className="flex justify-start items-center gap-1" href="/">
|
|
<Image
|
|
src="/favicon/android-chrome-192x192.png"
|
|
width={32}
|
|
height={32}
|
|
alt="Logo"
|
|
/>
|
|
<p className="font-bold text-inherit">Test Case Manager</p>
|
|
</NextLink>
|
|
</NavbarBrand>
|
|
<ul className="hidden lg:flex gap-4 justify-start ml-2">
|
|
{siteConfig.navItems.map((item) => (
|
|
<NavbarItem key={item.href}>
|
|
<NextLink
|
|
className="data-[active=true]:text-primary data-[active=true]:font-medium"
|
|
href={item.href}
|
|
>
|
|
{item.label}
|
|
</NextLink>
|
|
</NavbarItem>
|
|
))}
|
|
</ul>
|
|
</NavbarContent>
|
|
|
|
<NavbarContent
|
|
className="hidden sm:flex basis-1/5 sm:basis-full"
|
|
justify="end"
|
|
>
|
|
<NavbarItem className="hidden sm:flex gap-2">
|
|
{/* <Link isExternal href={siteConfig.links.twitter} aria-label="Twitter">
|
|
<TwitterIcon className="text-default-500" />
|
|
</Link> */}
|
|
{/* <Link isExternal href={siteConfig.links.discord} aria-label="Discord">
|
|
<DiscordIcon className="text-default-500" />
|
|
</Link> */}
|
|
<Link isExternal href={siteConfig.links.github} aria-label="Github">
|
|
<GithubIcon className="text-default-500" />
|
|
</Link>
|
|
<ThemeSwitch />
|
|
</NavbarItem>
|
|
<NavbarItem className="hidden lg:flex">{searchInput}</NavbarItem>
|
|
{/* <NavbarItem className="hidden md:flex">
|
|
<Button
|
|
isExternal
|
|
as={Link}
|
|
className="text-sm font-normal text-default-600 bg-default-100"
|
|
href={siteConfig.links.sponsor}
|
|
startContent={<HeartFilledIcon className="text-danger" />}
|
|
variant="flat"
|
|
>
|
|
Sponsor
|
|
</Button>
|
|
</NavbarItem> */}
|
|
</NavbarContent>
|
|
|
|
<NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
|
|
<Link isExternal href={siteConfig.links.github} aria-label="Github">
|
|
<GithubIcon className="text-default-500" />
|
|
</Link>
|
|
<ThemeSwitch />
|
|
<NavbarMenuToggle />
|
|
</NavbarContent>
|
|
|
|
<NavbarMenu>
|
|
{searchInput}
|
|
<div className="mx-4 mt-2 flex flex-col gap-2">
|
|
{siteConfig.navMenuItems.map((item, index) => (
|
|
<NavbarMenuItem key={`${item}-${index}`}>
|
|
<Link
|
|
color={
|
|
index === 2
|
|
? "primary"
|
|
: index === siteConfig.navMenuItems.length - 1
|
|
? "danger"
|
|
: "foreground"
|
|
}
|
|
href="#"
|
|
size="lg"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
</NavbarMenuItem>
|
|
))}
|
|
</div>
|
|
</NavbarMenu>
|
|
</NextUINavbar>
|
|
);
|
|
};
|