Use clsx for applying CSS classes

package.json

@@ -23,6 +23,7 @@
     "@reduxjs/toolkit": "^2.0.1",
     "@tabler/icons-react": "^3.0.0",
     "@types/uuid": "^9.0.2",
+    "clsx": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.0.4",

src/components/cards/TallyCard.tsx

@@ -24,6 +24,7 @@ import {
   reset,
   setName,
 } from "../../store/slices/countersSlice";
+import clsx from "clsx";
 
 const MAX_COUNT = 99999;
 const MAX_NAME_LENGTH = 32;
@@ -138,9 +139,9 @@ export default function TallyCard({
       </Center>
       <Group justify="space-between" grow>
         <ActionIcon
-          className={`${
-            count && `active-red ${canHover && "tally-card-hover-highlight"}`
-          }`}
+          className={clsx(
+            count && ["active-red", canHover && "tally-card-hover-highlight"],
+          )}
           onClick={() => dispatch(decrement({ id }))}
           onPointerDown={() => navigator.vibrate(VIBRATION_STRENGTH.weak)}
           onContextMenu={() => dispatch(reset({ id }))}
@@ -157,10 +158,12 @@ export default function TallyCard({
           <IconChevronDown size={48} />
         </ActionIcon>
         <ActionIcon
-          className={`${
-            count < MAX_COUNT &&
-            `active-green ${canHover && "tally-card-hover-highlight"}`
-          }`}
+          className={clsx(
+            count < MAX_COUNT && [
+              "active-green",
+              canHover && "tally-card-hover-highlight",
+            ],
+          )}
           onClick={() => dispatch(increment({ id }))}
           onPointerDown={() => navigator.vibrate(VIBRATION_STRENGTH.weak)}
           onPointerUp={() => navigator.vibrate(VIBRATION_STRENGTH.medium)}

yarn.lock

@@ -1588,7 +1588,7 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
-[email protected]:
+[email protected], clsx@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
   integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==