diff options
Diffstat (limited to 'src/ui/objects/Navbar.tsx')
| -rw-r--r-- | src/ui/objects/Navbar.tsx | 37 |
1 files changed, 37 insertions, 0 deletions
diff --git a/src/ui/objects/Navbar.tsx b/src/ui/objects/Navbar.tsx new file mode 100644 index 0000000..4439e58 --- /dev/null +++ b/src/ui/objects/Navbar.tsx | |||
| @@ -0,0 +1,37 @@ | |||
| 1 | /** Biome-ignore-all lint/a11y/noNoninteractiveElementToInteractiveRole: <explanation> */ | ||
| 2 | |||
| 3 | import type { HTMLAttributes } from "corvos/plugins/jsx.ts"; | ||
| 4 | |||
| 5 | export type Props = HTMLAttributes<"nav"> & { | ||
| 6 | "adapt"?: boolean; | ||
| 7 | "quiet"?: boolean; | ||
| 8 | "align-block"?: boolean; | ||
| 9 | "variant"?: "static-black" | "static-white"; | ||
| 10 | }; | ||
| 11 | |||
| 12 | export const Navbar = ({ | ||
| 13 | adapt, | ||
| 14 | quiet, | ||
| 15 | "align-block": alignBlock, | ||
| 16 | variant, | ||
| 17 | class: cls, | ||
| 18 | ...props | ||
| 19 | }: Props) => ( | ||
| 20 | <nav | ||
| 21 | class:list={[ | ||
| 22 | "o-navbar", | ||
| 23 | { | ||
| 24 | "o-navbar--adapt": adapt, | ||
| 25 | "o-navbar--quiet": quiet, | ||
| 26 | "o-navbar--align-block": alignBlock, | ||
| 27 | [`o-navbar--${variant}`]: variant, | ||
| 28 | }, | ||
| 29 | "js-keyboard-nav", | ||
| 30 | cls, | ||
| 31 | ]} | ||
| 32 | data-keyboard-nav-item=".o-navbar__item" | ||
| 33 | data-keyboard-nav-mode="nav" | ||
| 34 | role="menubar" | ||
| 35 | {...props} | ||
| 36 | /> | ||
| 37 | ); | ||
