mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
105 lines
3.3 KiB
TypeScript
105 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Navbar,
|
|
NavbarBrand,
|
|
NavbarContent,
|
|
NavbarItem,
|
|
Link as NextUiLink,
|
|
LinkProps,
|
|
Input,
|
|
DropdownItem,
|
|
DropdownTrigger,
|
|
Dropdown,
|
|
DropdownMenu,
|
|
Avatar,
|
|
} from "@nextui-org/react";
|
|
|
|
const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
|
|
|
|
import {SearchLinearIcon} from "@/components/icons";
|
|
|
|
const AcmeLogo = () => (
|
|
<svg fill="none" height="36" viewBox="0 0 32 32" width="36">
|
|
<path
|
|
clipRule="evenodd"
|
|
d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
|
|
fill="currentColor"
|
|
fillRule="evenodd"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
export default function Page() {
|
|
return (
|
|
<Navbar isBordered>
|
|
<NavbarContent justify="start">
|
|
<NavbarBrand className="mr-4">
|
|
<AcmeLogo />
|
|
<p className="hidden sm:block font-bold text-inherit">ACME</p>
|
|
</NavbarBrand>
|
|
<NavbarContent className="hidden sm:flex gap-3">
|
|
<NavbarItem>
|
|
<Link color="foreground" href="#">
|
|
Features
|
|
</Link>
|
|
</NavbarItem>
|
|
<NavbarItem isActive>
|
|
<Link aria-current="page" color="secondary" href="#">
|
|
Customers
|
|
</Link>
|
|
</NavbarItem>
|
|
<NavbarItem>
|
|
<Link color="foreground" href="#">
|
|
Integrations
|
|
</Link>
|
|
</NavbarItem>
|
|
</NavbarContent>
|
|
</NavbarContent>
|
|
<NavbarContent as="div" className="items-center" justify="end">
|
|
<Input
|
|
classNames={{
|
|
base: "max-w-full sm:max-w-[10rem] h-10",
|
|
input: "text-small",
|
|
inputWrapper:
|
|
"h-full font-normal text-default-500 bg-default-400/20 dark:bg-default-500/20",
|
|
}}
|
|
placeholder="Type to search..."
|
|
startContent={<SearchLinearIcon size={18} />}
|
|
type="search"
|
|
/>
|
|
<Dropdown placement="bottom-end">
|
|
<NavbarItem>
|
|
<DropdownTrigger>
|
|
<Avatar
|
|
isBordered
|
|
as="button"
|
|
className="transition-transform"
|
|
color="secondary"
|
|
name="Jason Hughes"
|
|
size="sm"
|
|
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
|
|
/>
|
|
</DropdownTrigger>
|
|
</NavbarItem>
|
|
<DropdownMenu aria-label="Profile Actions" variant="flat">
|
|
<DropdownItem key="profile" className="h-14 gap-2">
|
|
<p className="font-semibold">Signed in as</p>
|
|
<p className="font-semibold">zoey@example.com</p>
|
|
</DropdownItem>
|
|
<DropdownItem key="settings">My Settings</DropdownItem>
|
|
<DropdownItem key="team_settings">Team Settings</DropdownItem>
|
|
<DropdownItem key="analytics">Analytics</DropdownItem>
|
|
<DropdownItem key="system">System</DropdownItem>
|
|
<DropdownItem key="configurations">Configurations</DropdownItem>
|
|
<DropdownItem key="help_and_feedback">Help & Feedback</DropdownItem>
|
|
<DropdownItem key="logout" color="danger">
|
|
Log Out
|
|
</DropdownItem>
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
</NavbarContent>
|
|
</Navbar>
|
|
);
|
|
}
|