Badge color prop with test and docs (#796)

Co-authored-by: Pranay Kothapalli <pranaykothapalli@gmail.com>

Author: GoldGroove06

docs/app/docs/components/badge/page.js

@@ -8,19 +8,34 @@ export const metadata = SEO.getMetadata(PAGE_NAME)
 
 import codeUsage from "./docs/codeUsage"
 
-const AvatarDocs = () => {
+const BadgeDocs = () => {
+    const columns = [
+        {name: 'Prop', id: 'prop'},
+        {name: 'Type', id: 'type'},
+        {name: 'Default', id: 'default'},
+        {name: 'Description', id: 'description'},
+    ];
+
+    const data = [
+        {prop: 'color', type: 'string', default: 'null', description: 'Accent color of the component', id: 'color'},
+    ];
     return <div>
         <Documentation currentPage={PAGE_NAME} title='Badge' description={`
             Badges are used to display a small amount of information. They are used in the sidebar, and in the chat.
         `}>
             <Documentation.ComponentHero codeUsage={codeUsage}>
                 <div style={{ display: "flex", gap: 20 }}>
-                    <Badge src="https://i.pravatar.cc/1000" fallback="GG" >Badge</Badge>
+                    <Badge>Badge</Badge>
                 </div>
             </Documentation.ComponentHero>
 
+            
+            <div className="max-w-screen-md">
+                 <Documentation.Table columns={columns} data={data} />
+            </div>
+         
         </Documentation>
     </div>
 }
 
-export default AvatarDocs;
+export default BadgeDocs;

src/components/ui/Badge/Badge.tsx

@@ -10,8 +10,15 @@ export type BadgeProps = {
     props?: object[],
 }
 
-const Badge = ({ children, customRootClass = '', className = '', color, ...props }: BadgeProps) => {
-    return <BadgeRoot customRootClass={customRootClass} className={className} color={color ?? undefined} {...props}>
+const Badge = ({ children, customRootClass = '', className = '', color='', ...props }: BadgeProps) => {
+    
+    const data_attributes: Record<string, string> = {};
+
+    if (color) {
+        data_attributes['data-accent-color'] = color;
+    }
+
+    return <BadgeRoot customRootClass={customRootClass} className={className} {...data_attributes} {...props}>
         <BadgeContent>
             {children}
         </BadgeContent>

src/components/ui/Badge/tests/Badge.test.tsx

@@ -26,4 +26,9 @@ describe('Badge', () => {
         render(<Badge data-testid='badge'>Badge</Badge>);
         expect(screen.getByTestId('badge')).toBeInTheDocument();
     });
+
+    test('renders Badge component with custom color', () => {
+        render(<Badge color='blue'>Badge</Badge>);
+        expect(screen.getByText('Badge')).toHaveAttribute('data-accent-color', 'blue');
+    });
 });