Add color palette update, to consume classnames as well

Author: alphacoder-mp3

components/color-palette.tsx

@@ -1,19 +1,26 @@
 import { Dispatch, RefObject, SetStateAction } from 'react';
 import { Color } from '@/hooks/useColorPalette';
 import { getLightModeColor, getDarkModeColor } from '@/common/common';
+import { cn } from '@/lib/utils';
+import { type ClassValue } from 'clsx';
 
 export const ColorPalette = ({
   colorPaletteRef,
   bgColors,
   setBgColor,
+  className,
 }: {
   colorPaletteRef: RefObject<HTMLDivElement>;
   bgColors: Color[];
   setBgColor: Dispatch<SetStateAction<Color>>;
+  className?: ClassValue;
 }) => {
   return (
     <div
-      className="fixed inset-0 max-w-full min-h-fit px-2 py-4 md:py-0 bg-zinc-900 flex items-center justify-center flex-wrap gap-2 dark:rounded-xl z-50"
+      className={cn(
+        'fixed inset-0 max-w-full min-h-fit md:h-12 px-2 py-4 md:py-0 bg-zinc-900 flex items-center justify-center flex-wrap gap-2 dark:rounded-xl z-50',
+        className
+      )}
       ref={colorPaletteRef}
     >
       {bgColors.map(color => (