From f0d41ef01d494645fa0fb712b24f530f85393db3 Mon Sep 17 00:00:00 2001
From: Arshpreet Singh <73437174+GoldGroove06@users.noreply.github.com.>
Date: Mon, 9 Dec 2024 15:32:46 +0530
Subject: [PATCH] Util for className 1

---
 src/components/ui/Badge/Badge.tsx                   | 3 ++-
 src/components/ui/Badge/fragments/BadgeRoot.tsx     | 4 ++--
 src/components/ui/BlockQuote/BlockQuote.tsx         | 4 ++--
 src/components/ui/Button/Button.tsx                 | 4 ++--
 src/components/ui/Callout/Callout.tsx               | 4 ++--
 src/components/ui/Callout/fragments/CalloutRoot.tsx | 4 ++--
 src/components/ui/Card/Card.tsx                     | 4 ++--
 src/components/ui/Card/fragments/CardRoot.tsx       | 4 ++--
 src/components/ui/Code/Code.tsx                     | 4 ++--
 9 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/components/ui/Badge/Badge.tsx b/src/components/ui/Badge/Badge.tsx
index d03ccb7f..4776c577 100644
--- a/src/components/ui/Badge/Badge.tsx
+++ b/src/components/ui/Badge/Badge.tsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import BadgeRoot from './fragments/BadgeRoot';
 import BadgeContent from './fragments/BadgeContent';
+import { clsx } from 'clsx';
 export type BadgeProps = {
     children?: React.ReactNode,
     customRootClass?: string,
@@ -11,7 +12,7 @@ export type BadgeProps = {
 }
 
 const Badge = ({ children, customRootClass, className, color, ...props }: BadgeProps) => {
-    return <BadgeRoot customRootClass={customRootClass} className={`${className}`} color={color ?? undefined} {...props}>
+    return <BadgeRoot customRootClass={customRootClass} className={clsx(className)} color={color ?? undefined} {...props}>
 
         <BadgeContent>
             {children}
diff --git a/src/components/ui/Badge/fragments/BadgeRoot.tsx b/src/components/ui/Badge/fragments/BadgeRoot.tsx
index 21949bff..8a04bd6b 100644
--- a/src/components/ui/Badge/fragments/BadgeRoot.tsx
+++ b/src/components/ui/Badge/fragments/BadgeRoot.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { customClassSwitcher } from '~/core';
-
+import { clsx } from 'clsx';
 const COMPONENT_NAME = 'Badge';
 
 type BadgeRootProps = {
@@ -15,7 +15,7 @@ const BadgeRoot = ({ children, customRootClass, className, color, ...props }:Bad
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
 
     return (
-        <span className= {`${rootClass} ${className}`} data-accent-color={color ?? undefined} {...props}>
+        <span className={clsx(rootClass, className)} data-accent-color={color ?? undefined} {...props}>
             {children}
         </span>
     );
diff --git a/src/components/ui/BlockQuote/BlockQuote.tsx b/src/components/ui/BlockQuote/BlockQuote.tsx
index 5bf108a8..8c491b88 100644
--- a/src/components/ui/BlockQuote/BlockQuote.tsx
+++ b/src/components/ui/BlockQuote/BlockQuote.tsx
@@ -1,6 +1,6 @@
 'use client';
 import React from 'react';
-
+import { clsx } from 'clsx';
 import { customClassSwitcher } from '~/core';
 
 const COMPONENT_NAME = 'BlockQuote';
@@ -14,7 +14,7 @@ export type BlockQuoteProps = {
 const BlockQuote = ({ children, customRootClass, className, ...props }: BlockQuoteProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
 
-    return <blockquote className={`${rootClass} ${className}`} {...props}>{children}</blockquote>;
+    return <blockquote className={clsx(rootClass, className)} {...props}>{children}</blockquote>;
 };
 
 BlockQuote.displayName = COMPONENT_NAME;
diff --git a/src/components/ui/Button/Button.tsx b/src/components/ui/Button/Button.tsx
index 1277da41..ce6234e2 100644
--- a/src/components/ui/Button/Button.tsx
+++ b/src/components/ui/Button/Button.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React, { ButtonHTMLAttributes, DetailedHTMLProps, PropsWithChildren } from 'react';
 import { customClassSwitcher } from '~/core';
-
+import { clsx } from 'clsx';
 import ButtonPrimitive from '~/core/primitives/Button';
 
 // make the color prop default accent color
@@ -21,7 +21,7 @@ const Button = ({ children, type = 'button', customRootClass = '', className = '
     return (
         <ButtonPrimitive
             type={type}
-            className={`${rootClass} button-${variant} ${className} `} data-accent-color={color ?? undefined} data-size={size}
+            className={clsx(rootClass, 'button-${variant}', className, '')} data-accent-color={color ?? undefined} data-size={size}
             {...props}
         >
             {children}
diff --git a/src/components/ui/Callout/Callout.tsx b/src/components/ui/Callout/Callout.tsx
index f232e09b..d544f74c 100644
--- a/src/components/ui/Callout/Callout.tsx
+++ b/src/components/ui/Callout/Callout.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-
+import { clsx } from 'clsx';
 /**
  * Shards
 */
@@ -15,7 +15,7 @@ export type CalloutProps = {
 
 const COMPONENT_NAME = 'Callout';
 const Callout = ({ children, className = '', color, customRootClass, ...props }: CalloutProps) => {
-    return (<CalloutRoot customRootClass={customRootClass} className={`${className}`} color={color ?? undefined} {...props}>
+    return (<CalloutRoot customRootClass={customRootClass} className={clsx(className)} color={color ?? undefined} {...props}>
         {children}
     </CalloutRoot>);
 };
diff --git a/src/components/ui/Callout/fragments/CalloutRoot.tsx b/src/components/ui/Callout/fragments/CalloutRoot.tsx
index 30ea6a8d..db8c1e40 100644
--- a/src/components/ui/Callout/fragments/CalloutRoot.tsx
+++ b/src/components/ui/Callout/fragments/CalloutRoot.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { customClassSwitcher } from '~/core';
-
+import { clsx } from 'clsx';
 const COMPONENT_NAME = 'Callout';
 
 type CalloutRootProps = {
@@ -13,7 +13,7 @@ type CalloutRootProps = {
 
 const CalloutRoot = ({ children, className, color, customRootClass, ...props }: CalloutRootProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-    return <div className={`${rootClass} ${className}`} data-accent-color={color ?? undefined} {...props}>
+    return <div className={clsx(rootClass, className)} data-accent-color={color ?? undefined} {...props}>
         {children}
     </div>;
 };
diff --git a/src/components/ui/Card/Card.tsx b/src/components/ui/Card/Card.tsx
index 0fa7efde..bdb6415c 100644
--- a/src/components/ui/Card/Card.tsx
+++ b/src/components/ui/Card/Card.tsx
@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import CardRoot from './fragments/CardRoot';
-
+import { clsx } from 'clsx';
 export type CardProps = {
     customRootClass?: string;
     className?: string;
@@ -8,7 +8,7 @@ export type CardProps = {
 } & React.ComponentProps<'div'>;
 
 const Card = ({ children, className = '', customRootClass, ...props }: PropsWithChildren<CardProps>) => (
-    <CardRoot className={className} customRootClass={customRootClass} {...props}>
+    <CardRoot className={clsx(className)} customRootClass={customRootClass} {...props}>
         {children}
     </CardRoot>
 );
diff --git a/src/components/ui/Card/fragments/CardRoot.tsx b/src/components/ui/Card/fragments/CardRoot.tsx
index 7bf9b7e9..c3f31734 100644
--- a/src/components/ui/Card/fragments/CardRoot.tsx
+++ b/src/components/ui/Card/fragments/CardRoot.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { customClassSwitcher } from '~/core';
-
+import { clsx } from 'clsx';
 const COMPONENT_NAME = 'Card';
 export type CardRootProps = {
     children: React.ReactNode;
@@ -13,7 +13,7 @@ const CardRoot = ({ children, customRootClass, className = '', ...props }: CardR
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
 
     return (
-        <div className={`${rootClass} ${className}`} {...props} >
+        <div className={clsx(rootClass, className)} {...props} >
             {children}
         </div>
     );
diff --git a/src/components/ui/Code/Code.tsx b/src/components/ui/Code/Code.tsx
index 0b0c39ce..7c972946 100644
--- a/src/components/ui/Code/Code.tsx
+++ b/src/components/ui/Code/Code.tsx
@@ -1,12 +1,12 @@
 'use client';
 import React from 'react';
-
+import { clsx } from 'clsx';
 export type CodeProps= {
     children: React.ReactNode;
 }
 
 const Code = ({ children }: CodeProps) => {
-    return <code className='rui-code-root'>
+    return <code className={clsx('rui-code-root')}>
         {children}
     </code>;
 };