Init

1 files changed, 33 insertions, 0 deletions

diff --git a/src/ui/objects/NavbarItem.tsx b/src/ui/objects/NavbarItem.tsx
new file mode 100644
index 0000000..c0e347f
--- /dev/null
+++ b/src/ui/objects/NavbarItem.tsx
@@ -0,0 +1,33 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        as: Tag;
+        icon?: JSX.Element;
+        pre?: JSX.Element;
+        post?: JSX.Element;
+        selected?: boolean;
+}>;
+
+export const NavbarItem = <T extends HTMLTag = "a">({
+        children,
+        as: Tag = "a" as T,
+        icon,
+        pre,
+        post,
+        selected,
+        class: cls,
+        ...props
+}: Props<T>) => (
+        <Tag
+                aria-current={selected ? "page" : undefined}
+                class:list={["o-navbar__item", { "is-selected": selected }, cls]}
+                role="menuitem"
+                {...props}
+        >
+                {icon && <div class="o-navbar__item-label">{children}</div>}
+
+                <div class="o-navbar__item-content">
+                        {pre} {icon ?? <span class="o-navbar__item-content-text">{children}</span>} {post}
+                </div>
+        </Tag>
+);