Merge classnames to clsx

components/mdx/Anchor.tsx

@@ -1,5 +1,5 @@
 import { AnchorHTMLAttributes, forwardRef } from 'react';
-import cn from 'classnames';
+import clsx from 'clsx';
 import { FiExternalLink } from 'react-icons/fi';
 
 interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -17,7 +17,7 @@ const Anchor = forwardRef<HTMLAnchorElement, Props>(
           target={external ? '_blank' : undefined}
         >
           <span
-            className={cn(
+            className={clsx(
               'mx-[2px] text-teal-500 relative',
               'before:left-0 before:top-[1px] before:block before:absolute',
               'before:w-full before:h-full before:transition-all before:shadow-underline',

components/mdx/Image.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import NextImage, { ImageProps } from 'next/image';
 
 interface Props extends ImageProps {}
@@ -9,11 +9,7 @@ const Image = ({ alt, ...rest }: Props) => {
       <NextImage className="mx-auto" alt={alt} {...rest} />
       {alt && (
         <span
-          className={classNames(
-            'block mx-auto',
-            'text-center text-gray-400',
-            'my-2'
-          )}
+          className={clsx('block mx-auto', 'text-center text-gray-400', 'my-2')}
         >
           {alt}
         </span>

components/mdx/LinkAnchor.tsx

@@ -1,4 +1,4 @@
-import cn from 'classnames';
+import clsx from 'clsx';
 import { ReactNode } from 'react';
 import { FiExternalLink } from 'react-icons/fi';
 
@@ -11,7 +11,7 @@ const Anchor = ({ children, external = true }: Props) => {
   return (
     <>
       <span
-        className={cn(
+        className={clsx(
           'mx-[2px] text-teal-500 relative',
           'before:left-0 before:top-[1px] before:block before:absolute',
           'before:w-full before:h-full before:transition-all before:shadow-underline',
@@ -26,4 +26,4 @@ const Anchor = ({ children, external = true }: Props) => {
   );
 };
 
-export default Anchor;
+export default Anchor;

components/mdx/Pre.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import useCopyToClipboard from 'lib/hooks/useCopyToClipboard';
 import { DetailedHTMLProps, HTMLAttributes, lazy, useRef } from 'react';
 
@@ -24,7 +24,7 @@ const Pre = ({ ...rest }: Props) => {
     <>
       <pre
         ref={preRef}
-        className={classNames(className, 'relative group')}
+        className={clsx(className, 'relative group')}
         {...props}
       >
         {children}