From e8518b2461079140b9f7fc3b09fc2a237caceded Mon Sep 17 00:00:00 2001
From: Matt Warman <mwarman@users.noreply.github.com>
Date: Mon, 3 Jun 2024 09:53:38 -0400
Subject: [PATCH] #54 Fix Badge Example (#55)

* 54 fix badge example

* #54 additional badge example
---
 .../components/BadgeComponents.tsx             | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/pages/ComponentsPage/components/BadgeComponents.tsx b/src/pages/ComponentsPage/components/BadgeComponents.tsx
index 8c9c0b3..7471bcc 100644
--- a/src/pages/ComponentsPage/components/BadgeComponents.tsx
+++ b/src/pages/ComponentsPage/components/BadgeComponents.tsx
@@ -86,13 +86,27 @@ 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>
+
+      <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>