refactor: move utility function to a new file and update imports

- Deleted the old tailwind.utils.ts file and moved the 'cn' function to utils.ts as is the default convention.
- Updated all component imports to reference the new utils.ts file instead of the deleted tailwind.utils.ts.
- Adjusted image quality settings in the Header and NoteBlockWorldLogo components for improved performance.

Author: tomast1337

apps/frontend/src/lib/tailwind.utils.ts apps/frontend/src/lib/utils.tsapps/frontend/src/lib/tailwind.utils.ts renamed to apps/frontend/src/lib/utils.ts

@@ -1,4 +1,4 @@
-import { type ClassValue, clsx } from 'clsx';
+import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {

apps/frontend/src/modules/shared/components/NoteBlockWorldLogo.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image';
 
-import { cn } from '@web/lib/tailwind.utils';
+import { cn } from '@web/lib/utils';
 
 export const NoteBlockWorldLogo = ({
   size,
@@ -37,6 +37,7 @@ export const NoteBlockWorldLogo = ({
     >
       <Image
         src='/nbw-color.png'
+        quality={75}
         alt='Note Block World logo'
         width={size}
         height={size}

apps/frontend/src/modules/shared/components/client/Carousel.tsx

@@ -20,7 +20,7 @@ import {
   useState,
 } from 'react';
 
-import { cn } from '../../../../lib/tailwind.utils';
+import { cn } from '@web/lib/utils';
 
 export type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;

apps/frontend/src/modules/shared/components/client/Command.tsx

@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Command as CommandPrimitive } from 'cmdk';
 import * as React from 'react';
 
-import { cn } from '../../../../lib/tailwind.utils';
+import { cn } from '@web/lib/utils';
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,

apps/frontend/src/modules/shared/components/client/FormElements.tsx

@@ -5,7 +5,7 @@ import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react';
 import Skeleton from 'react-loading-skeleton';
 import Markdown from 'react-markdown';
 
-import { cn } from '@web/lib/tailwind.utils';
+import { cn } from '@web/lib/utils';
 import { ErrorBalloon } from '@web/modules/shared/components/client/ErrorBalloon';
 
 import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';

apps/frontend/src/modules/shared/components/client/Popover.tsx

@@ -3,7 +3,7 @@
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as React from 'react';
 
-import { cn } from '../../../../lib/tailwind.utils';
+import { cn } from '@web/lib/utils';
 
 const Popover = PopoverPrimitive.Root;
 

apps/frontend/src/modules/shared/components/client/ads/AdSlots.tsx

@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Script from 'next/script';
 import { useEffect, useState } from 'react';
 
-import { cn } from '@web/lib/tailwind.utils';
+import { cn } from '@web/lib/utils';
 
 import useAdSenseClient from './useAdSenseClient';
 

apps/frontend/src/modules/shared/components/layout/BlockTab.tsx

@@ -2,7 +2,7 @@ import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Link from 'next/link';
 
-import { cn } from '@web/lib/tailwind.utils';
+import { cn } from '@web/lib/utils';
 
 import { MusicalNote } from './MusicalNote';
 

apps/frontend/src/modules/shared/components/layout/CopyrightFooter.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 
-import { cn } from '@web/lib/tailwind.utils';
+import { cn } from '@web/lib/utils';
 
 export const CopyrightFooter = ({ className }: { className?: string }) => (
   <p className={cn('mx-auto text-zinc-600 text-xs', className)}>

apps/frontend/src/modules/shared/components/layout/Header.tsx

@@ -39,7 +39,7 @@ export async function Header() {
           <Link href='/'>
             <Image
               unoptimized
-              quality={100}
+              quality={75}
               src='/nbw-color.png'
               alt='NoteBlockWorld logo'
               className='h-10 mx-auto my-2 aspect-square drop-shadow-[0_35px_35px_rgba(0.2,0.58,1,0.25)] hover:animate-[nbw-glow_3s_ease-in-out_infinite]'