refactor(badge): add consistency

src/components/ui/Badge/Badge.tsx

@@ -1,31 +1,31 @@
 import type {BadgeProps} from "./BadgeProps.ts";
 
 /**
- * A reusable Badge component that displays text and an optional remove button.
+ * Badge - A reusable badge that displays text with DaisyUI variant styling and an optional remove button.
+ *
+ * @param {BadgeProps} props - Component props
+ * @returns {JSX.Element} Rendered component
+ *
+ * @example
+ * <Badge text="New" variant="primary" removable onRemove={() => console.log('removed')} />
  */
-export const Badge = ({
-    text,
-    variant = 'primary',
-    removable = false,
-    onRemove
-}: BadgeProps) => {
+export function Badge(props: BadgeProps) {
+	const variant = props.variant ?? 'primary';
+	const removable = props.removable ?? false;
+	// Note: The 'color' prop from BadgeProps is ignored in favor of the 'variant'
+	// prop, which aligns with DaisyUI's class-based styling.
+	const badgeClasses = [
+			'badge',
+			`badge-${variant}`,
+			'gap-2'
+	].join(' ');
 
-    // Note: The 'color' prop from BadgeProps is ignored in favor of the 'variant'
-    // prop, which aligns with DaisyUI's class-based styling.
-    const badgeClasses = [
-        'badge',
-        `badge-${variant}`,
-        'gap-2' // Adds a small gap between text and the remove button
-    ].join(' ');
-
-    return (
-        <div className={badgeClasses}>
-            <span>{text}</span>
-            {removable && (
-                <button onClick={onRemove} className="btn btn-ghost btn-xs">
-                    ✕
-                </button>
-            )}
-        </div>
-    );
-};
+	return (
+		<div className={badgeClasses}>
+			<span>{props.text}</span>
+			{removable && (<button onClick={props.onRemove} className="btn btn-ghost btn-xs">
+				✕
+			</button>)}
+		</div>
+	);
+}

src/components/ui/Badge/BadgeProps.ts

@@ -1,7 +1,7 @@
 export interface BadgeProps {
-    text: string,
-    color: string,
-    variant: 'primary' | 'secondary' | 'accent' | 'ghost',
-    removable: boolean,
-    onRemove: () => void
+	text: string,
+	color: string,
+	variant: 'primary' | 'secondary' | 'accent' | 'ghost',
+	removable: boolean,
+	onRemove?: () => void
 }