Use 'cn' utility with clsx/tailwind-merge

src/components/AppWrapper.tsx

@@ -1,4 +1,4 @@
-import { classNames } from "@/utils/helpers";
+import { cn } from "@/utils/helpers";
 import { Disclosure } from "@headlessui/react";
 import dynamic from "next/dynamic";
 import Link from "next/link";
@@ -31,7 +31,7 @@ const AppWrapper: FunctionComponent<WrapperProps> = ({
 }: WrapperProps) => {
   return (
     <main
-      className={classNames(
+      className={cn(
         "min-h-screen text-zinc-50",
         className,
       )}

src/components/ItemCard.tsx

@@ -1,6 +1,6 @@
 import React, { useRef } from "react";
 import { useOnClickOutside, useToggle } from "usehooks-ts";
-import { classNames, isHoverable } from "@/utils/helpers";
+import { cn, isHoverable } from "@/utils/helpers";
 import ReactMarkdown from "react-markdown";
 import Balancer from "react-wrap-balancer";
 
@@ -52,7 +52,7 @@ const ItemCard = ({
     <>
       <div
         ref={itemRef}
-        className={classNames(
+        className={cn(
           "item [&:not(:first-child)]:mt-3",
           active ? "active" : null,
         )}
@@ -63,7 +63,7 @@ const ItemCard = ({
           src={banner}
           quality={bannerSettings?.quality ?? 75}
           className={(loaded) =>
-            classNames("object-cover", loaded ? null : "blur-xl")
+            cn("object-cover", loaded ? null : "blur-xl")
           }
           alt={`Banner for ${title}`}
         />
@@ -109,7 +109,7 @@ const ItemCard = ({
         aria-disabled={!active}
         ref={mobileButtonRef}
         href={active ? { pathname: location } : {}}
-        className={classNames(
+        className={cn(
           "flex w-full items-center justify-center rounded border border-zinc-900 bg-zinc-800 shadow transition-all",
           active ? "h-9 p-2 opacity-100" : "h-0 p-0 opacity-0",
         )}

src/utils/helpers.ts

@@ -3,8 +3,11 @@ import create from "@kodingdotninja/use-tailwind-breakpoint";
 import resolveConfig from "tailwindcss/resolveConfig";
 import tailwindConfig from "@/../tailwind.config.cjs";
 
-export function classNames(...classes: (string | null | undefined)[]) {
-  return classes.filter(Boolean).join(" ");
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
 }
 
 const isClient = (): boolean => {