replace clsx with twJoin from tailwind-merge

Author: frontendfixer

src/components/Button.tsx

@@ -1,5 +1,5 @@
-import clsx from 'clsx';
 import { ReactNode } from 'react';
+import { twJoin } from 'tailwind-merge';
 
 type ButtonType = {
   type?: 'button' | 'submit' | 'reset' | undefined;
@@ -23,7 +23,7 @@ const Button = ({
       type={type}
       onClick={onClick}
       disabled={disabled}
-      className={clsx(
+      className={twJoin(
         `rounded-lg px-5 py-2 font-medium text-white transition`,
         fullWidth && 'w-full',
         buttonType === 'secondary' && 'bg-slate-500 hover:bg-slate-400',

src/components/Container.tsx

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

src/components/NavigationMenu.tsx

@@ -1,6 +1,6 @@
-import clsx from 'clsx';
 import { MouseEvent } from 'react';
 import { Link } from 'react-router-dom';
+import { twJoin } from 'tailwind-merge';
 
 import Button from './Button';
 import ThemeSwitcher from './ThemeSwitcher';
@@ -73,7 +73,7 @@ const NavigationMenu = ({ openState }: { openState: boolean }) => {
         {openState && (
           <>
             <ul
-              className={clsx(
+              className={twJoin(
                 `mt-1 flex flex-col gap-1 py-6 transition-all duration-500`,
                 !openState && 'h-0 w-0 scale-y-0',
                 openState && 'h-full w-full origin-top scale-y-100',

src/components/ProjectCard.tsx

@@ -2,7 +2,6 @@ import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import { faEye } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useState } from 'react';
-import { twJoin } from 'tailwind-merge';
 
 import { ProjectType } from '../data/Projects';
 import ImageModal from './ImageModal';
@@ -48,19 +47,19 @@ const ProjectCard = ({ project }: { project: ProjectType }) => {
               .map((el, i) => (
                 <span
                   key={i}
-                  className={twJoin(
-                    'inline-block rounded',
-                    el == 'react' && 'bg-[hsl(224,96%,80%)]/80',
-                    el == 'nextjs' && 'bg-[hsl(220,6%,18%)]/80 text-white',
-                    el == 'typescript' && 'bg-[hsl(186,96%,80%)]/80',
-                    el == 'redux' && 'bg-[hsl(263,96%,80%)]/80',
-                    el == 'MUI' && 'bg-[hsl(203,96%,80%)]/80',
-                    el == 'prisma' && 'bg-[hsl(225,22%,30%)]/80 text-white',
-                    el == 'postgreSQL' && 'bg-[hsl(350,96%,80%)]/80',
-                    'px-3 py-1 text-[12px] capitalize',
-                  )}
+                  style={{
+                    display: 'inline-block',
+                    borderRadius: '4px',
+                    backgroundColor: `hsl(${Math.floor(
+                      Math.random() * 360,
+                    )},96%,80%)`,
+                    paddingInline: '10px',
+                    paddingBlock: '4px',
+                    fontSize: '12px',
+                    fontWeight: '500',
+                  }}
                 >
-                  {el}
+                  #{el}
                 </span>
               ))}
           </div>

src/components/ToggleButton.tsx

@@ -1,6 +1,6 @@
 import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import clsx from 'clsx';
+import { twJoin } from 'tailwind-merge';
 
 const ToggleButton = ({
   isDarkMode,
@@ -11,7 +11,7 @@ const ToggleButton = ({
 }) => {
   return (
     <div
-      className={clsx(
+      className={twJoin(
         'relative flex h-[27px] w-[54px] cursor-pointer items-center justify-between rounded-full border-2 px-1 transition-colors duration-300 ease-linear',
         isDarkMode
           ? 'border-blue-700 bg-blue-300'
@@ -21,7 +21,7 @@ const ToggleButton = ({
     >
       <FontAwesomeIcon icon={faMoon} className="h-4 w-4 text-dark-900" />
       <span
-        className={clsx(
+        className={twJoin(
           `absolute top-1/2 h-5 w-5 -translate-y-1/2 rounded-full bg-blue-600 shadow-md transition-all duration-300 ease-linear`,
           !isDarkMode ? 'left-[3px]' : 'left-[28px]',
         )}