feat(components): use new group item tag

abusix · Jun 19, 2024 · 2775873 · 2775873
1 parent 5005053
commit 2775873
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/src/components/navigation/navigation-disclosure.tsx b/src/components/navigation/navigation-disclosure.tsx
@@ -1,6 +1,7 @@
 import { Disclosure } from "@headlessui/react";
 import React from "react";
 import { NavigationDisclosurePanel } from "./navigation-disclosure-panel";
+import { NavigationGroupItemTag } from "./navigation-group-item-tag";
 
 export interface NavigationDisclosureButtonProps {
     children: React.ReactNode;
@@ -22,11 +23,7 @@ const NavigationDisclosureButton = ({
         >
             {LeftIcon ? <LeftIcon className="h-4 w-4" /> : null}
             {children}
-            {tag ? (
-                <span className="ml-auto rounded border border-neutral-0 px-1.5 text-xs font-semibold uppercase text-neutral-0">
-                    {tag}
-                </span>
-            ) : null}
+            {tag ? <NavigationGroupItemTag>{tag}</NavigationGroupItemTag> : null}
         </Disclosure.Button>
     );
 };

diff --git a/src/components/navigation/navigation-group.tsx b/src/components/navigation/navigation-group.tsx
@@ -1,15 +1,18 @@
 import React from "react";
 import { classNames } from "../../util/class-names";
+import { NavigationGroupItemTag } from "./navigation-group-item-tag";
 
 export interface NavigationGroupItemProps extends React.ComponentPropsWithoutRef<"div"> {
     isActive?: boolean;
     LeftIcon?: React.ElementType;
+    tag?: string;
 }
 
 const NavigationGroupItem = ({
     children,
     isActive,
     LeftIcon,
+    tag,
     ...props
 }: NavigationGroupItemProps) => {
     return (
@@ -22,6 +25,7 @@ const NavigationGroupItem = ({
         >
             {LeftIcon ? <LeftIcon className="h-4 w-4" /> : null}
             {children}
+            {tag ? <NavigationGroupItemTag>{tag}</NavigationGroupItemTag> : null}
             {isActive && (
                 <div className="absolute bottom-0 left-0 top-0 h-full w-0.5 rounded-r-sm bg-neutral-0" />
             )}

diff --git a/src/components/navigation/navigation.stories.tsx b/src/components/navigation/navigation.stories.tsx
@@ -26,7 +26,9 @@ export const Default: Story = {
                 <nav className="flex flex-1 flex-col">
                     <Navigation.Group>
                         <Navigation.Group.Item>Home</Navigation.Group.Item>
-                        <Navigation.Group.Item isActive>Dashboard</Navigation.Group.Item>
+                        <Navigation.Group.Item isActive tag="Beta">
+                            Dashboard
+                        </Navigation.Group.Item>
                     </Navigation.Group>
                     <Navigation.Group>
                         <Navigation.Group.Item>Lookup & Delist</Navigation.Group.Item>