Replace clsx with cn util

components/cart/add-to-cart.tsx

@@ -1,7 +1,7 @@
 'use client';
 
+import { cn } from '@/lib/utils';
 import { PlusIcon } from '@heroicons/react/24/outline';
-import clsx from 'clsx';
 import { addItem } from 'components/cart/actions';
 import LoadingDots from 'components/loading-dots';
 import { ProductVariant } from 'lib/shopify/types';
@@ -51,7 +51,7 @@ export function AddToCart({
           router.refresh();
         });
       }}
-      className={clsx(
+      className={cn(
         'bg-blue-600 relative flex w-full items-center justify-center rounded-full p-4 tracking-wide text-white hover:opacity-90',
         {
           'cursor-not-allowed opacity-60 hover:opacity-60': !availableForSale || !selectedVariantId,

components/cart/close-cart.tsx

@@ -1,10 +0,0 @@
-import { XMarkIcon } from '@heroicons/react/24/outline';
-import clsx from 'clsx';
-
-export default function CloseCart({ className }: { className?: string }) {
-  return (
-    <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
-      <XMarkIcon className={clsx('h-6 transition-all ease-in-out hover:scale-110 ', className)} />
-    </div>
-  );
-}

components/cart/delete-item-button.tsx

@@ -1,8 +1,8 @@
 import LoadingDots from 'components/loading-dots';
 import { useRouter } from 'next/navigation';
 
+import { cn } from '@/lib/utils';
 import { XMarkIcon } from '@heroicons/react/24/outline';
-import clsx from 'clsx';
 import { removeItem } from 'components/cart/actions';
 import type { CartItem } from 'lib/shopify/types';
 import { useTransition } from 'react';
@@ -28,7 +28,7 @@ export default function DeleteItemButton({ item }: { item: CartItem }) {
         });
       }}
       disabled={isPending}
-      className={clsx(
+      className={cn(
         'ease flex h-[17px] w-[17px] items-center justify-center rounded-full bg-neutral-500 transition-all duration-200',
         {
           'cursor-not-allowed px-0': isPending

components/cart/edit-item-quantity-button.tsx

@@ -2,7 +2,6 @@ import { useRouter } from 'next/navigation';
 import { useTransition } from 'react';
 
 import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
-import clsx from 'clsx';
 import { removeItem, updateItemQuantity } from 'components/cart/actions';
 import LoadingDots from 'components/loading-dots';
 import type { CartItem } from 'lib/shopify/types';
@@ -41,7 +40,7 @@ export default function EditItemQuantityButton({
         });
       }}
       disabled={isPending}
-      className={clsx(
+      className={cn(
         'ease flex h-full min-w-[36px] max-w-[36px] flex-none items-center justify-center rounded-full px-2 transition-all duration-200 hover:border-neutral-800 hover:opacity-80',
         {
           'cursor-not-allowed': isPending,

components/cart/open-cart.tsx

@@ -1,5 +1,5 @@
+import { cn } from '@/lib/utils';
 import { ShoppingBagIcon } from '@heroicons/react/24/outline';
-import clsx from 'clsx';
 
 export default function OpenCart({
   className,
@@ -11,10 +11,7 @@ export default function OpenCart({
   return (
     <div className="relative flex h-8 w-8 items-center justify-center text-high-contrast lg:h-11 lg:w-11">
       <ShoppingBagIcon
-        className={clsx(
-          'h-5 stroke-current transition-all ease-in-out hover:scale-110 ',
-          className
-        )}
+        className={cn('h-5 stroke-current transition-all ease-in-out hover:scale-110 ', className)}
       />
 
       {quantity ? (

components/layout/header/mobile-menu/open-mobile-menu.tsx

@@ -1,11 +1,11 @@
+import { cn } from '@/lib/utils';
 import { Bars3Icon } from '@heroicons/react/24/outline';
-import clsx from 'clsx';
 
 export default function OpenMobileMenu({ className }: { className?: string }) {
   return (
     <div className="relative flex h-8 w-8 items-center justify-center text-high-contrast">
       <Bars3Icon
-        className={clsx(
+        className={cn(
           'h-6 w-6 translate-y-px transform stroke-current transition-all ease-in-out hover:scale-110 ',
           className
         )}

components/layout/header/search/open-search.tsx

@@ -1,11 +1,12 @@
+import { cn } from '@/lib/utils';
+
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
-import clsx from 'clsx';
 
 export default function OpenSearch({ className }: { className?: string }) {
   return (
     <div className="relative flex h-8 w-8 items-center justify-center text-high-contrast lg:h-11 lg:w-11">
       <MagnifyingGlassIcon
-        className={clsx('h-5 transition-all ease-in-out hover:scale-110 ', className)}
+        className={cn('h-5 transition-all ease-in-out hover:scale-110 ', className)}
       />
     </div>
   );

components/layout/header/user-menu/open-user-menu.tsx

@@ -1,14 +1,11 @@
+import { cn } from '@/lib/utils';
 import { UserCircleIcon } from '@heroicons/react/24/outline';
-import clsx from 'clsx';
 
 export default function OpenUserMenu({ className }: { className?: string }) {
   return (
     <div className="relative flex h-8 w-8 items-center justify-center text-high-contrast lg:h-11 lg:w-11">
       <UserCircleIcon
-        className={clsx(
-          'h-5 stroke-current transition-all ease-in-out hover:scale-110 ',
-          className
-        )}
+        className={cn('h-5 stroke-current transition-all ease-in-out hover:scale-110 ', className)}
       />
     </div>
   );

components/loading-dots.tsx

@@ -1,13 +1,13 @@
-import clsx from 'clsx';
+import { cn } from '@/lib/utils';
 
 const dots = 'mx-[1px] inline-block h-1 w-1 animate-blink rounded-md';
 
 const LoadingDots = ({ className }: { className: string }) => {
   return (
     <span className="mx-2 inline-flex items-center">
-      <span className={clsx(dots, className)} />
-      <span className={clsx(dots, 'animation-delay-[200ms]', className)} />
-      <span className={clsx(dots, 'animation-delay-[400ms]', className)} />
+      <span className={cn(dots, className)} />
+      <span className={cn(dots, 'animation-delay-[200ms]', className)} />
+      <span className={cn(dots, 'animation-delay-[400ms]', className)} />
     </span>
   );
 };

components/product/variant-selector.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import clsx from 'clsx';
 import { ProductOption, ProductVariant } from 'lib/shopify/types';
 import { createUrl } from 'lib/utils';
 import Link from 'next-intl/link';
@@ -88,7 +87,7 @@ export function VariantSelector({
               aria-disabled={!isAvailableForSale}
               href={optionUrl}
               title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
-              className={clsx(
+              className={cn(
                 'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900',
                 {
                   'ring-blue-600 cursor-default ring-2': isActive,

components/prose.tsx

@@ -1,21 +0,0 @@
-import clsx from 'clsx';
-import type { FunctionComponent } from 'react';
-
-interface TextProps {
-  html: string;
-  className?: string;
-}
-
-const Prose: FunctionComponent<TextProps> = ({ html, className }) => {
-  return (
-    <div
-      className={clsx(
-        'prose mx-auto max-w-6xl text-base leading-7 text-black prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-a:text-black prose-a:underline hover:prose-a:text-neutral-300 prose-strong:text-black prose-ol:mt-8 prose-ol:list-decimal prose-ol:pl-6 prose-ul:mt-8 prose-ul:list-disc prose-ul:pl-6 dark:text-white dark:prose-headings:text-white dark:prose-a:text-white dark:prose-strong:text-white',
-        className
-      )}
-      dangerouslySetInnerHTML={{ __html: html as string }}
-    />
-  );
-};
-
-export default Prose;