feat: extend the ClassNames interface

src/common/className.ts

@@ -10,10 +10,29 @@ export function prefixClaName(name: string, prefix: string = APP_PREFIX) {
     return name ? `${prefix}-${name}` : '';
 }
 
-export function classNames(...names) {
-    return names.filter((name) => !!name).join(' ');
+export function classNames(...args) {
+    let classList: string[] = [];
+    for (let arg of args) {
+        if (!arg) continue;
+        let argType = typeof arg;
+        if (argType === 'string' || argType === 'number') {
+            classList.push(arg);
+            continue
+        }
+        if (argType === 'object') {
+            if (arg.toString !== Object.prototype.toString) {
+                classList.push(arg.toString());
+                continue
+            }
+            for (let key in arg) {
+                if (Object.hasOwnProperty.call(arg, key) && arg[key]) {
+                    classList.push(key);
+                }
+            }
+        }
+    }
+    return classList.join(' ');
 }
-
 /**
  * Element names may consist of Latin letters, digits, dashes and underscores.
  * CSS class is formed as block name plus two underscores plus element name: .block__elem

src/components/tabs/tabButton.tsx

@@ -44,7 +44,7 @@ export default function TabButton({
         <div
             className={classNames(
                 'tab-button',
-                active ? 'tab-button--active' : '',
+                { 'tab-button--active': true },
                 className
             )}
             onClick={handleClick}