148 lines
3.8 KiB
TypeScript
148 lines
3.8 KiB
TypeScript
import { Input } from "@nextui-org/input";
|
|
import { Kbd } from "@nextui-org/kbd";
|
|
import { Link } from "@nextui-org/link";
|
|
import {
|
|
NavbarBrand,
|
|
NavbarContent,
|
|
NavbarItem,
|
|
NavbarMenu,
|
|
NavbarMenuItem,
|
|
NavbarMenuToggle,
|
|
Navbar as NextUINavbar,
|
|
} from "@nextui-org/navbar";
|
|
|
|
import { link as linkStyles } from "@nextui-org/theme";
|
|
|
|
import { siteConfig } from "@/config/site";
|
|
import clsx from "clsx";
|
|
import NextLink from "next/link";
|
|
|
|
import {
|
|
SearchIcon
|
|
} from "@/components/icons";
|
|
import { ThemeSwitch } from "@/components/theme-switch";
|
|
|
|
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={"px-8 py-3"} classNames={{
|
|
wrapper: "max-w-full",
|
|
}}>
|
|
<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="/paslon01.png"
|
|
alt="logo"
|
|
width={100}
|
|
height={100}
|
|
/>
|
|
</NextLink>
|
|
</NavbarBrand>
|
|
</NavbarContent>
|
|
<NavbarContent>
|
|
<ul className="hidden lg:flex gap-3 justify-start ml-2">
|
|
{siteConfig.navItems.map((item) => (
|
|
<NavbarItem key={item.href}>
|
|
<NextLink
|
|
className={clsx(
|
|
linkStyles({ color: "primary" }),
|
|
"data-[active=true]:text-primary data-[active=true]:font-medium"
|
|
)}
|
|
color="foreground"
|
|
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>
|
|
);
|
|
};
|