refactor: use cn to combine twMerge with clsx

Author: FoxtrotSierra6829

package-lock.json

@@ -114,6 +114,7 @@
     "@types/winreg": "^1.2.31",
     "@types/ws": "^8.5.3",
     "check-disk-space": "^3.3.1",
+    "clsx": "^2.1.1",
     "config-ini-parser": "~1.5.9",
     "dateformat": "^5.0.1",
     "electron-store": "^8.0.1",

package.json

@@ -3,9 +3,8 @@ import { useSelector } from 'react-redux';
 import { InstallerStore } from 'renderer/redux/store';
 import { Check } from 'tabler-icons-react';
 import { Addon, AddonTrack } from 'renderer/utils/InstallerConfiguration';
-
+import cn from 'renderer/utils/cn';
 import '../index.css';
-import { twMerge } from 'tailwind-merge';
 
 export const Tracks: React.FC = ({ children }) => (
   <div className="flex flex-row items-stretch justify-start gap-3">{children}</div>
@@ -27,8 +26,8 @@ export const Track: React.FC<TrackProps> = ({ isSelected, isInstalled, handleSel
 
   return (
     <div
-      className={twMerge(
-        `flex w-60 h-24 cursor-pointer flex-col rounded-sm-md border-2 border-transparent bg-navy-dark text-white transition-all duration-200 hover:border-navy-lightest hover:text-gray-300`,
+      className={cn(
+        'flex w-60 h-24 cursor-pointer flex-col rounded-sm-md border-2 border-transparent bg-navy-dark text-white transition-all duration-200 hover:border-navy-lightest hover:text-gray-300',
         isSelected && 'border-2 border-cyan text-cyan',
       )}
       onClick={() => handleSelected(track)}

src/renderer/components/AddonSection/Configure/TrackSelector.tsx

@@ -9,6 +9,7 @@ import Msfs2020logo from '../../assets/msfs2020.png';
 import Msfs2024logo from '../../assets/msfs2024.png';
 import { InstallStatus } from 'renderer/components/AddonSection/Enums';
 import { enabledSimulators, nextSim, Simulators } from 'renderer/utils/SimManager';
+import cn from 'renderer/utils/cn';
 
 export const NavBar: FC = ({ children }) => {
   const darkTheme = useIsDarkTheme();
@@ -85,8 +86,8 @@ export const ManagedSimSelector: FC<NavBarItemProps> = ({
   return (
     <NavLink
       to={to}
-      className={`${BASE_STYLE} ${className} group`}
-      activeClassName={`${BASE_STYLE} bg-navy-light`}
+      className={cn(BASE_STYLE, className, 'group')}
+      activeClassName={cn(BASE_STYLE, 'bg-navy-light')}
       onClick={handleClick}
     >
       {children}

src/renderer/components/App/NavBar.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { twMerge } from 'tailwind-merge';
+import cn from 'renderer/utils/cn';
 
 interface ToggleProps {
   value: boolean;
@@ -17,12 +17,12 @@ export const Toggle: FC<ToggleProps> = ({
   onColor = 'bg-cyan-medium',
 }) => (
   <div
-    className={twMerge(`flex h-8 w-14 cursor-pointer items-center rounded-full text-3xl`, bgColor)}
+    className={cn(`flex h-8 w-14 cursor-pointer items-center rounded-full text-3xl`, bgColor)}
     onClick={() => onToggle(!value)}
     style={{ transform: `scale(${scale})` }}
   >
     <div
-      className={twMerge(`mx-1.5 size-6 rounded-full bg-gray-400 transition duration-200`, value && onColor)}
+      className={cn(`mx-1.5 size-6 rounded-full bg-gray-400 transition duration-200`, value && onColor)}
       style={{ transform: `translate(${value ? '12px' : '1px'}, 0)` }}
     />
   </div>

src/renderer/components/Toggle.tsx

@@ -0,0 +1,7 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+const cn = (...inputs: ClassValue[]) => {
+  return twMerge(clsx(inputs));
+};
+export default cn;