118 lines
2.8 KiB
TypeScript
118 lines
2.8 KiB
TypeScript
import {
|
|
Navbar as NextUINavbar,
|
|
NavbarContent,
|
|
NavbarMenu,
|
|
NavbarMenuToggle,
|
|
NavbarBrand,
|
|
NavbarItem,
|
|
NavbarMenuItem,
|
|
} from "@nextui-org/navbar";
|
|
import { Button } from "@nextui-org/button";
|
|
import { Kbd } from "@nextui-org/kbd";
|
|
import { Link } from "@nextui-org/link";
|
|
import { Input } from "@nextui-org/input";
|
|
|
|
import { link as linkStyles } from "@nextui-org/theme";
|
|
|
|
import { siteConfig } from "@/config/site";
|
|
import NextLink from "next/link";
|
|
import clsx from "clsx";
|
|
|
|
import { ThemeSwitch } from "@/components/theme-switch";
|
|
import {
|
|
TwitterIcon,
|
|
GithubIcon,
|
|
DiscordIcon,
|
|
HeartFilledIcon,
|
|
SearchIcon,
|
|
ChevronDownIcon,
|
|
FbIcon,
|
|
IgIcon,
|
|
YtIcon,
|
|
TwIcon,
|
|
TtIcon,
|
|
} from "@/components/icons";
|
|
|
|
import { Logo } from "@/components/icons";
|
|
import { Image } from "@nextui-org/react";
|
|
|
|
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 className="h-36 w-full lg:w-full"
|
|
classNames={{
|
|
wrapper: "w-full max-w-full h-[90%]",
|
|
}}>
|
|
<NavbarBrand className="max-w-fit">
|
|
<Image
|
|
src="/logohumas.png"
|
|
/>
|
|
</NavbarBrand>
|
|
<NavbarContent className="hidden sm:flex gap-12 basis-2/3 " justify="center">
|
|
<NavbarItem>
|
|
<Link color="foreground" href="#">
|
|
<p className="mr-1 font-semibold">Pelayanan Masyarakat</p>
|
|
<ChevronDownIcon />
|
|
</Link>
|
|
</NavbarItem>
|
|
<NavbarItem >
|
|
<Link href="#" color="foreground">
|
|
<p className="mr-1 font-semibold">Portal PPID</p>
|
|
</Link>
|
|
</NavbarItem>
|
|
<NavbarItem>
|
|
<Link color="foreground" href="#">
|
|
<p className="mr-1 font-semibold">Publikasi</p>
|
|
<ChevronDownIcon />
|
|
</Link>
|
|
</NavbarItem>
|
|
<NavbarItem>
|
|
<Link color="foreground" href="#">
|
|
<p className="mr-1 font-semibold">Tentang</p>
|
|
<ChevronDownIcon />
|
|
</Link>
|
|
</NavbarItem>
|
|
<NavbarItem>
|
|
<Link color="foreground" href="#">
|
|
<p className="mr-1 font-semibold">Aplikasi Terkait</p>
|
|
<ChevronDownIcon />
|
|
</Link>
|
|
</NavbarItem>
|
|
<NavbarItem>
|
|
<ThemeSwitch />
|
|
</NavbarItem>
|
|
</NavbarContent>
|
|
<NavbarContent className="flex flex-col items-center ">
|
|
<div className="flex gap-3">
|
|
<div><FbIcon /></div>
|
|
<div><IgIcon /></div>
|
|
<div><YtIcon /></div>
|
|
<div><TwIcon /></div>
|
|
<div><TtIcon /></div>
|
|
</div>
|
|
<div className="font-bold">{searchInput}</div>
|
|
</NavbarContent>
|
|
</NextUINavbar>
|
|
);
|
|
};
|