chore: use clsx library instead of custom cn utility for managing class names

components/ui/sidebar/Sidebar.tsx

@@ -14,10 +14,9 @@ import {
   ListboxSection,
   Tooltip,
 } from "@nextui-org/react";
+import clsx from "clsx";
 import React from "react";
 
-import { cn } from "@/utils/cn";
-
 export enum SidebarItemType {
   Nest = "nest",
 }
@@ -67,20 +66,20 @@ const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(
 
     const sectionClasses = {
       ...sectionClassesProp,
-      base: cn(sectionClassesProp?.base, "w-full", {
+      base: clsx(sectionClassesProp?.base, "w-full", {
         "p-0 max-w-[44px]": isCompact,
       }),
-      group: cn(sectionClassesProp?.group, {
+      group: clsx(sectionClassesProp?.group, {
         "flex flex-col gap-1": isCompact,
       }),
-      heading: cn(sectionClassesProp?.heading, {
+      heading: clsx(sectionClassesProp?.heading, {
         hidden: isCompact,
       }),
     };
 
     const itemClasses = {
       ...itemClassesProp,
-      base: cn(itemClassesProp?.base, {
+      base: clsx(itemClassesProp?.base, {
         "w-11 h-11 gap-0 p-0": isCompact,
       }),
     };
@@ -102,7 +101,7 @@ const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(
             {...item}
             key={item.key}
             classNames={{
-              base: cn(
+              base: clsx(
                 {
                   "h-auto p-0": !isCompact && isNestType,
                 },
@@ -119,7 +118,7 @@ const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(
             startContent={
               isCompact || isNestType ? null : item.icon ? (
                 <Icon
-                  className={cn(
+                  className={clsx(
                     "text-default-500 group-data-[selected=true]:text-foreground",
                     iconClassName,
                   )}
@@ -137,7 +136,7 @@ const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(
                 <div className="flex w-full items-center justify-center">
                   {item.icon ? (
                     <Icon
-                      className={cn(
+                      className={clsx(
                         "text-default-500 group-data-[selected=true]:text-foreground",
                         iconClassName,
                       )}
@@ -166,7 +165,7 @@ const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(
                         className={"flex h-11 items-center gap-2 px-2 py-1.5"}
                       >
                         <Icon
-                          className={cn(
+                          className={clsx(
                             "text-default-500 group-data-[selected=true]:text-foreground",
                             iconClassName,
                           )}
@@ -186,7 +185,7 @@ const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(
                     <Listbox
                       className={"mt-0.5"}
                       classNames={{
-                        list: cn("border-l border-default-200 pl-4"),
+                        list: clsx("border-l border-default-200 pl-4"),
                       }}
                       items={item.items}
                       variant="flat"
@@ -226,7 +225,7 @@ const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(
             startContent={
               isCompact ? null : item.icon ? (
                 <Icon
-                  className={cn(
+                  className={clsx(
                     "text-default-500 group-data-[selected=true]:text-foreground",
                     iconClassName,
                   )}
@@ -245,7 +244,7 @@ const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(
                 <div className="flex w-full items-center justify-center">
                   {item.icon ? (
                     <Icon
-                      className={cn(
+                      className={clsx(
                         "text-default-500 group-data-[selected=true]:text-foreground",
                         iconClassName,
                       )}
@@ -270,19 +269,19 @@ const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(
         ref={ref}
         hideSelectedIcon
         as="nav"
-        className={cn("list-none", className)}
+        className={clsx("list-none", className)}
         classNames={{
           ...classNames,
-          list: cn("items-center", classNames?.list),
+          list: clsx("items-center", classNames?.list),
         }}
         color="default"
         itemClasses={{
           ...itemClasses,
-          base: cn(
+          base: clsx(
             "px-3 min-h-11 rounded-large h-[44px] data-[selected=true]:bg-default-100",
             itemClasses?.base,
           ),
-          title: cn(
+          title: clsx(
             "text-small font-medium text-default-500 group-data-[selected=true]:text-foreground",
             itemClasses?.title,
           ),

components/ui/sidebar/SidebarWrap.tsx

@@ -6,8 +6,6 @@ import clsx from "clsx";
 import React, { useCallback, useEffect, useState } from "react";
 import { useMediaQuery } from "usehooks-ts";
 
-import { cn } from "@/utils/cn";
-
 import {
   ProwlerExtended,
   ProwlerShort,
@@ -90,7 +88,7 @@ export const SidebarWrap = () => {
       </ScrollShadow>
       <Spacer y={2} />
       <div
-        className={cn("mt-auto flex flex-col", {
+        className={clsx("mt-auto flex flex-col", {
           "items-center": isCompact,
         })}
       >
@@ -101,7 +99,7 @@ export const SidebarWrap = () => {
         >
           <Button
             fullWidth
-            className={cn(
+            className={clsx(
               "justify-start truncate text-default-500 data-[hover=true]:text-foreground",
               {
                 "justify-center": isCompact,
@@ -132,7 +130,7 @@ export const SidebarWrap = () => {
         </Tooltip>
         <Tooltip content="Log Out" isDisabled={!isCompact} placement="right">
           <Button
-            className={cn(
+            className={clsx(
               "justify-start text-default-500 data-[hover=true]:text-foreground",
               {
                 "justify-center": isCompact,
@@ -163,7 +161,7 @@ export const SidebarWrap = () => {
         </Tooltip>
       </div>
       <div
-        className={cn("mt-auto flex justify-end gap-3 items-baseline", {
+        className={clsx("mt-auto flex justify-end gap-3 items-baseline", {
           "flex-col items-center": isCompact,
         })}
       >
@@ -172,7 +170,7 @@ export const SidebarWrap = () => {
           placement={isCompact ? "right" : "top"}
         >
           <div
-            className={cn(
+            className={clsx(
               "text-default-500 data-[hover=true]:text-foreground px-0",
               {
                 "justify-center mt-3": isCompact,
@@ -187,7 +185,7 @@ export const SidebarWrap = () => {
           placement={isCompact ? "right" : "top"}
         >
           <Button
-            className={cn(
+            className={clsx(
               "text-default-500 data-[hover=true]:text-foreground px-0",
               {
                 "justify-center": isCompact,

components/ui/sidebar/TeamAvatar.tsx

@@ -2,10 +2,9 @@
 
 import type { AvatarProps } from "@nextui-org/react";
 import { Avatar } from "@nextui-org/react";
+import clsx from "clsx";
 import React from "react";
 
-import { cn } from "@/utils/cn";
-
 export const TeamAvatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
   ({ name, className, classNames = {}, ...props }, ref) => (
     <Avatar
@@ -13,12 +12,12 @@ export const TeamAvatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
       ref={ref}
       classNames={{
         ...classNames,
-        base: cn(
+        base: clsx(
           "bg-transparent border border-divider",
           classNames?.base,
           className,
         ),
-        name: cn(
+        name: clsx(
           "text-default-500 text-[0.6rem] font-semibold",
           classNames?.name,
         ),

components/ui/sidebar/UserAvatar.tsx

@@ -1,10 +1,9 @@
 "use client";
 
 import { Avatar } from "@nextui-org/react";
+import clsx from "clsx";
 import React from "react";
 
-import { cn } from "@/utils/cn";
-
 interface UserAvatarProps {
   userName: string;
   position: string;
@@ -19,7 +18,7 @@ export const UserAvatar: React.FC<UserAvatarProps> = ({
     <div className="flex items-center gap-3 px-3">
       <Avatar isBordered className="flex-none" size="sm" showFallback />
       <div
-        className={cn("flex max-w-full flex-col", {
+        className={clsx("flex max-w-full flex-col", {
           hidden: isCompact,
         })}
       >

utils/cn.ts

@@ -1,22 +0,0 @@
-import type { ClassValue } from "clsx";
-import clsx from "clsx";
-import { twMerge } from "tailwind-merge";
-
-// Definition of custom classes you want to combine
-const customClasses = new Map<string, string>([
-  ["text-small", "text-small"],
-  ["text-default-500", "text-default-500"],
-  // Add more custom classes as needed
-]);
-
-export function cn(...inputs: ClassValue[]) {
-  // Filter and combine custom classes before passing them to twMerge
-  const filteredInputs = inputs.map((input) => {
-    if (typeof input === "string") {
-      return customClasses.get(input) || input;
-    }
-    return input;
-  });
-
-  return twMerge(clsx(filteredInputs));
-}