From e0f18171c0d725c73ea6d496e382729538538793 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 14 Mar 2024 13:24:04 -0500
Subject: [PATCH] Fix breadcrumb on tag edit page

---
 src/components/AdminChildPage.tsx | 8 +++-----
 src/components/Badge.tsx          | 8 ++++++--
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/AdminChildPage.tsx b/src/components/AdminChildPage.tsx
index d5afc963..6a96900e 100644
--- a/src/components/AdminChildPage.tsx
+++ b/src/components/AdminChildPage.tsx
@@ -45,11 +45,9 @@ function AdminChildPage({
                 {breadcrumb &&
                   <>
                     <span>/</span>
-                    <span className={clsx(isLoading && 'opacity-50')}>
-                      <Badge>
-                        {breadcrumb}
-                      </Badge>
-                    </span>
+                    <Badge dimContent={isLoading}>
+                      {breadcrumb}
+                    </Badge>
                   </>}
                 {isLoading &&
                   <Spinner />}
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 67461974..fb4850d4 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -3,12 +3,14 @@ import { clsx } from 'clsx/lite';
 export default function Badge({
   children,
   type = 'large',
+  dimContent,
   highContrast,
   uppercase,
   interactive,
 }: {
   children: React.ReactNode
   type?: 'large' | 'small' | 'text-only'
+  dimContent?: boolean
   highContrast?: boolean
   uppercase?: boolean
   interactive?: boolean
@@ -19,7 +21,7 @@ export default function Badge({
       return clsx(
         'px-1.5 py-[0.3rem] rounded-md',
         'bg-gray-100/80 dark:bg-gray-900/80',
-        'border border-gray-200/60 dark:border-gray-800/75'
+        'border border-gray-200/60 dark:border-gray-800/75',
       );
     case 'small':
       return clsx(
@@ -43,7 +45,9 @@ export default function Badge({
       stylesForType(),
       uppercase && 'uppercase tracking-wider',
     )}>
-      {children}
+      <span className={clsx(dimContent && 'opacity-50')}>
+        {children}
+      </span>
     </span>
   );
 }