replace all twJoin function with custom 'cn' lib function

Author: frontendfixer

src/components/Button.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { twJoin } from 'tailwind-merge';
+
+import { cn } from '#/lib/cn';
 
 type ButtonType = {
   type?: 'button' | 'submit' | 'reset' | undefined;
@@ -23,7 +24,7 @@ const Button = ({
       type={type}
       onClick={onClick}
       disabled={disabled}
-      className={twJoin(
+      className={cn(
         `transition-color flex items-center justify-center gap-4 rounded-lg px-5 py-2 font-medium duration-300 disabled:bg-dark-500 disabled:text-white-full`,
         fullWidth && 'w-full',
         buttonType === 'secondary' &&

src/components/ContactForm.tsx

@@ -3,11 +3,12 @@ import { faPaperPlane } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ChangeEvent, FormEvent, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { twJoin } from 'tailwind-merge';
 import validator from 'validator';
 
+import { cn } from '#/lib/cn';
 import { setFormData, setFormStatus } from '#store/reducer/FormSlice';
 import { AppDispatch, RootState } from '#store/store';
+
 import Button from './Button';
 import Spinner from './Spinner';
 
@@ -92,7 +93,7 @@ const ContactForm = () => {
         />
         <label
           htmlFor="name"
-          className={twJoin(inputs.name.length > 0 && 'active')}
+          className={cn(inputs.name.length > 0 && 'active')}
         >
           Enter your Name
         </label>
@@ -108,7 +109,7 @@ const ContactForm = () => {
         />
         <label
           htmlFor="email"
-          className={twJoin(inputs.email.length > 0 && 'active')}
+          className={cn(inputs.email.length > 0 && 'active')}
         >
           Enter Your Email
         </label>
@@ -132,7 +133,7 @@ const ContactForm = () => {
         />
         <label
           htmlFor="message"
-          className={twJoin(inputs.message.length > 0 && 'active')}
+          className={cn(inputs.message.length > 0 && 'active')}
         >
           Message
         </label>

src/components/Container.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { twJoin } from 'tailwind-merge';
+
+import { cn } from '#/lib/cn';
 
 const Container = ({
   children,
@@ -10,7 +11,7 @@ const Container = ({
 }) => {
   return (
     <div
-      className={twJoin(
+      className={cn(
         `max-w-[90rem]`,
         fullWidth && 'w-full',
         !fullWidth && 'w-[96%]',

src/components/Logo.tsx

@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom';
-import { twJoin } from 'tailwind-merge';
+
+import { cn } from '#/lib/cn';
 
 const Logo = ({
   large,
@@ -13,7 +14,7 @@ const Logo = ({
       <svg
         viewBox="0 0 233.462 44.648"
         xmlns="http://www.w3.org/2000/svg"
-        className={twJoin(
+        className={cn(
           large ? 'w-48' : 'w-32',
           variant === 'dark' ? 'text-white' : 'text-dark dark:text-white',
         )}

src/components/NavigationMenu.tsx

@@ -1,5 +1,6 @@
 import { MouseEvent } from 'react';
-import { twJoin } from 'tailwind-merge';
+
+import { cn } from '#/lib/cn';
 
 import CVDownloadButton from './CVDownloadButton';
 import ThemeSwitcher from './ThemeSwitcher';
@@ -61,13 +62,13 @@ const NavigationMenu = ({ openState }: { openState: boolean }) => {
       </nav>
       {/* Mobile Navbar */}
       <nav
-        className={twJoin(
+        className={cn(
           'mt-3 grid w-full overflow-hidden rounded-md bg-white-full px-3 transition-[grid-template-rows]  duration-300 ease-linear md:hidden dark:bg-dark-700',
           !openState ? 'grid-rows-[0fr]' : 'grid-rows-[1fr]',
         )}
       >
         <div
-          className={twJoin(
+          className={cn(
             'min-h-0 transition-[visibility] duration-300',
             !openState ? 'invisible' : 'visible',
           )}

src/components/ProjectCard.tsx

@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useState } from 'react';
 
 import { ProjectType } from '#data/Projects';
+
 import ImageModal from './ImageModal';
 
 const ProjectCard = ({ project }: { project: ProjectType }) => {

src/components/RecentWork.tsx

@@ -1,4 +1,5 @@
 import Projects from '#data/Projects';
+
 import ProjectCard from './ProjectCard';
 
 const featuredProject = Projects.filter(project => project.featured);

src/components/SocialLinks.tsx

@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { twJoin } from 'tailwind-merge';
 
+import { cn } from '#/lib/cn';
 import { SocialLink, socialLinks } from '#data/Social';
 
 const SocialLinks = ({ inverted }: { inverted?: boolean }) => {
@@ -10,7 +10,7 @@ const SocialLinks = ({ inverted }: { inverted?: boolean }) => {
         <a href={link.url} key={link.id} target="_blank">
           <FontAwesomeIcon
             icon={link.icon}
-            className={twJoin(
+            className={cn(
               'h-8 w-8',
               inverted ? 'text-white-full' : 'text-dark',
               'shadow-sm transition-transform duration-300 ease-linear hover:-translate-y-1 hover:text-primary dark:text-white dark:hover:text-primary-400',

src/components/Spinner.tsx

@@ -1,9 +1,9 @@
-import { twJoin } from 'tailwind-merge';
+import { cn } from '#/lib/cn';
 
 const Spinner = ({ size }: { size: number }) => {
   return (
     <div
-      className={twJoin(
+      className={cn(
         'relative',
         `w-${size} h-${size}`,
         'animate-spin rounded-full border-4 border-secondary-400 border-t-white-full',

src/components/ThemeSwitcher.tsx

@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { toggleTheme } from '#store/reducer/ThemeReducer';
 import { RootState } from '#store/store';
+
 import ToggleButton from './ToggleButton';
 
 const ThemeSwitcher = ({ className }: { className?: string }) => {