From 570742ce21755415a3b4bfd920e44513684508bb Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Mon, 3 Jun 2024 09:43:16 -0400
Subject: [PATCH 1/2] 54 fix badge example

---
 src/pages/ComponentsPage/components/BadgeComponents.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/ComponentsPage/components/BadgeComponents.tsx b/src/pages/ComponentsPage/components/BadgeComponents.tsx
index 8c9c0b3..6bdc046 100644
--- a/src/pages/ComponentsPage/components/BadgeComponents.tsx
+++ b/src/pages/ComponentsPage/components/BadgeComponents.tsx
@@ -86,13 +86,13 @@ const BadgeComponents = ({
 
       <div className="my-8">
         <div className="mb-2 flex place-content-center rounded border border-neutral-500/10 p-4 dark:bg-neutral-700/25">
-          <Badge className="bg-blue-500" testId="my-badge">
+          <Badge className="!bg-blue-500" testId="my-badge">
             19
           </Badge>
         </div>
         <CodeSnippet
           className="my-2"
-          code={`<Badge className='bg-blue-500' testId='my-badge'>19</Badge>`}
+          code={`<Badge className='!bg-blue-500' testId='my-badge'>19</Badge>`}
         />
       </div>
     </section>

From 0d31ef08a203d25e0a86ee9486d3498cb92455a2 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Mon, 3 Jun 2024 09:51:46 -0400
Subject: [PATCH 2/2] #54 additional badge example

---
 .../ComponentsPage/components/BadgeComponents.tsx  | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/pages/ComponentsPage/components/BadgeComponents.tsx b/src/pages/ComponentsPage/components/BadgeComponents.tsx
index 6bdc046..7471bcc 100644
--- a/src/pages/ComponentsPage/components/BadgeComponents.tsx
+++ b/src/pages/ComponentsPage/components/BadgeComponents.tsx
@@ -95,6 +95,20 @@ const BadgeComponents = ({
           code={`<Badge className='!bg-blue-500' testId='my-badge'>19</Badge>`}
         />
       </div>
+
+      <div className="my-8">
+        <div className="mb-2 flex place-content-center rounded border border-neutral-500/10 p-4 dark:bg-neutral-700/25">
+          <Badge className="!bg-neutral-500 uppercase" testId="badge-status-closed">
+            Closed
+          </Badge>
+        </div>
+        <CodeSnippet
+          className="my-2"
+          code={`<Badge className="!bg-neutral-500 uppercase" testId="badge-status-closed">
+  Closed
+</Badge>`}
+        />
+      </div>
     </section>
   );
 };