♻️ remove classnames -> use cn() utils instead

app/artist/[artistId]/page.tsx

@@ -3,16 +3,19 @@
 import { useCallback, useState } from "react";
 import { NextPage } from "next";
 import { useParams } from "next/navigation";
-import classNames from "classnames";
 
 import useFetch from "@/hooks/useFetch";
 import useSpotify from "@/hooks/useSpotify";
 import useDominantColor from "@/hooks/useDominantColor";
+
 import generateRGBString from "@/lib/generateRGBString";
+import { cn } from "@/lib/utils";
 
 import Cover from "@/components/Cover";
 import HorizontalSlider from "@/components/HorizontalSlider";
+
 import { Button } from "@/components/ui/button";
+
 import MonthlyListeners from "./MonthlyListeners";
 
 const ArtistDetails: NextPage = () => {
@@ -87,7 +90,7 @@ const ArtistDetails: NextPage = () => {
                 currentFilter === "albums" ? generateRGBString(color, 0.7) : "",
             }}
             size="sm"
-            className={classNames(
+            className={cn(
               "w-auto justify-start rounded-full text-xs",
               currentFilter === "albums" && "text-white hover:bg-white"
             )}
@@ -102,7 +105,7 @@ const ArtistDetails: NextPage = () => {
                   ? generateRGBString(color, 0.7)
                   : "",
             }}
-            className={classNames(
+            className={cn(
               "w-auto justify-start rounded-full text-xs",
               currentFilter === "singles" && "text-white hover:bg-white"
             )}

components/AppHeader/index.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { usePathname, useRouter } from "next/navigation";
 import { ChevronLeftCircleIcon, ChevronRightCircleIcon } from "lucide-react";
-import classNames from "classnames";
+
+import { cn } from "@/lib/utils";
 
 import ThemeToggle from "@/components/ThemeToggle";
 import UserNav from "@/components/UserNav";
@@ -14,7 +15,7 @@ function AppHeader() {
 
   return (
     <div
-      className={classNames(
+      className={cn(
         "flex justify-between items-center px-8 py-4 left-0 right-0 absolute",
         pathname !== "/studio" && "sm:left-[90px] md:left-[266px]"
       )}

components/Cover/index.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image";
-import classNames from "classnames";
+
+import { cn } from "@/lib/utils";
 
 import CoverFallback from "../../assets/cover-fallback.svg";
 
@@ -29,7 +30,7 @@ const Cover: React.FC<CoverProps> = ({
   return (
     <Image
       alt={alt}
-      className={classNames(`block object-cover ${sizes[size]}`, additionalCss)}
+      className={cn(`block object-cover ${sizes[size]}`, additionalCss)}
       priority={priority}
       src={src ?? CoverFallback}
       height={640}

components/Layout/index.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { usePathname } from "next/navigation";
-import classNames from "classnames";
+
+import { cn } from "@/lib/utils";
 
 import AppHeader from "@/components/AppHeader";
 import Player from "@/components/Player";
@@ -28,13 +29,13 @@ function Layout({ children }: { children: React.ReactNode }) {
         </div>
 
         <div
-          className={classNames(
+          className={cn(
             "flex-auto",
             isFullScreenPage ? "sm:ml-0" : "sm:ml-[90px] md:ml-[266px] pb-20"
           )}
         >
           <div
-            className={classNames(
+            className={cn(
               isFullScreenPage
                 ? "mb-0 sm:mb-0"
                 : isFullScreenPageResponsive

components/Player/Controls.tsx

@@ -1,7 +1,7 @@
-import classNames from "classnames";
-
 import { usePlayerContext } from "@/context/PlayerContext";
+
 import isWhite from "@/lib/isWhite";
+import { cn } from "@/lib/utils";
 
 import useDominantColor from "@/hooks/useDominantColor";
 import useSpotify from "@/hooks/useSpotify";
@@ -60,10 +60,7 @@ const Controls = () => {
           role="button"
           aria-hidden="true"
           viewBox="0 0 16 16"
-          className={classNames(
-            "h-4 w-4",
-            isWhiteBg ? "fill-black" : "fill-white"
-          )}
+          className={cn("h-4 w-4", isWhiteBg ? "fill-black" : "fill-white")}
         >
           <path d="M3.3 1a.7.7 0 0 1 .7.7v5.15l9.95-5.744a.7.7 0 0 1 1.05.606v12.575a.7.7 0 0 1-1.05.607L4 9.149V14.3a.7.7 0 0 1-.7.7H1.7a.7.7 0 0 1-.7-.7V1.7a.7.7 0 0 1 .7-.7h1.6z"></path>
         </svg>
@@ -108,10 +105,7 @@ const Controls = () => {
           role="button"
           aria-hidden="true"
           viewBox="0 0 16 16"
-          className={classNames(
-            "h-4 w-4",
-            isWhiteBg ? "fill-black" : "fill-white"
-          )}
+          className={cn("h-4 w-4", isWhiteBg ? "fill-black" : "fill-white")}
         >
           <path d="M12.7 1a.7.7 0 0 0-.7.7v5.15L2.05 1.107A.7.7 0 0 0 1 1.712v12.575a.7.7 0 0 0 1.05.607L12 9.149V14.3a.7.7 0 0 0 .7.7h1.6a.7.7 0 0 0 .7-.7V1.7a.7.7 0 0 0-.7-.7h-1.6z"></path>
         </svg>

components/SideBar/Playlists.tsx

@@ -4,6 +4,7 @@ import usePlaylists from "@/hooks/usePlaylists";
 
 import Cover from "@/components/Cover";
 import Droppable from "@/components/Droppable";
+
 import { Button } from "@/components/ui/button";
 
 import PlaylistsSkeleton from "./PlaylistsSkeleton";

components/SideBar/index.tsx

@@ -1,10 +1,10 @@
 import { usePathname } from "next/navigation";
 import Link from "next/link";
-import classNames from "classnames";
 
 import { usePlayerContext } from "@/context/PlayerContext";
 
 import routes from "@/lib/routes";
+import { cn } from "@/lib/utils";
 
 import { Button } from "@/components/ui/button";
 import { DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
@@ -19,7 +19,7 @@ function SideBar() {
 
   return (
     <div
-      className={classNames(
+      className={cn(
         "fixed top-0 overflow-x-hidden sm:w-[96px] md:w-[266px] p-4",
         currentPlaybackState ? "bottom-[80px]" : "bottom-0"
       )}

components/TrackLink/index.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
-import classNames from "classnames";
+
+import { cn } from "@/lib/utils";
 
 interface TrackLinkProps {
   isActive?: boolean;
@@ -10,7 +11,7 @@ interface TrackLinkProps {
 const TrackLink: React.FC<TrackLinkProps> = ({ isActive, onClick, track }) => (
   <div className="box-border">
     <Link
-      className={classNames(
+      className={cn(
         "flex overflow-hidden text-ellipsis text-left whitespace-nowrap hover:underline",
         isActive && "text-green-primary"
       )}

components/Vinyl/index.tsx

@@ -1,5 +1,4 @@
 import Image from "next/image";
-import classNames from "classnames";
 import { IoPlaySkipBack, IoPlaySkipForward } from "react-icons/io5";
 import { FaPause, FaPlay } from "react-icons/fa6";
 
@@ -8,7 +7,9 @@ import { usePlayerContext } from "@/context/PlayerContext";
 import useDominantColor from "@/hooks/useDominantColor";
 import useSpotify from "@/hooks/useSpotify";
 import useTrack from "@/hooks/useTrack";
+
 import generateRGBString from "@/lib/generateRGBString";
+import { cn } from "@/lib/utils";
 
 import ArtistLink from "@/components/ArtistLink";
 import TrackLink from "@/components/TrackLink";
@@ -99,7 +100,7 @@ const Vinyl = () => {
     <div className="music-box">
       <div
         id="album"
-        className={classNames(
+        className={cn(
           "album-box",
           currentPlaybackState?.is_playing && "active"
         )}

package.json

@@ -26,7 +26,6 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
     "class-variance-authority": "^0.7.0",
-    "classnames": "^2.3.2",
     "clsx": "^2.0.0",
     "colorthief": "^2.4.0",
     "jsdom": "^23.0.1",