Add color paletter color name below each color, remove some colors from safelist

Author: alphacoder-mp3

common/common.ts

@@ -5,3 +5,7 @@ export function getLightModeColor(color: string) {
 export function getDarkModeColor(color: string) {
   return `dark:${color}`;
 }
+
+export function getColorName(color: string) {
+  return color.replace('-700', '').replace('bg-', '');
+}

components/color-palette.tsx

@@ -1,6 +1,10 @@
 import { Dispatch, RefObject, SetStateAction } from 'react';
 import { Color } from '@/hooks/useColorPalette';
-import { getLightModeColor, getDarkModeColor } from '@/common/common';
+import {
+  getLightModeColor,
+  getDarkModeColor,
+  getColorName,
+} from '@/common/common';
 import { cn } from '@/lib/utils';
 import { type ClassValue } from 'clsx';
 
@@ -27,10 +31,16 @@ export const ColorPalette = ({
         <div
           className={`h-6 w-6 rounded-full hover:border dark:border-white border-black cursor-pointer ${getLightModeColor(
             color
-          )} ${getDarkModeColor(color)}`}
+          )} ${getDarkModeColor(color)} group`}
           key={color}
           onClick={() => setBgColor(color)}
-        />
+        >
+          <div className="hidden group-hover:flex items-center justify-center mt-6">
+            <div className="px-2 text-sm bg-gray-600 text-white rounded-md">
+              {getColorName(color)}
+            </div>
+          </div>
+        </div>
       ))}
     </div>
   );

tailwind.config.ts

@@ -31,27 +31,6 @@ const config = {
     'dark:bg-lime-700',
     'dark:bg-green-700',
     'dark:bg-amber-700',
-    'bg-zinc-700',
-    'bg-slate-700',
-    'bg-neutral-700',
-    'bg-gray-700',
-    'bg-stone-700',
-    'bg-yellow-700',
-    'bg-orange-700',
-    'bg-violet-700',
-    'bg-blue-700',
-    'bg-sky-700',
-    'bg-indigo-700',
-    'bg-fuchsia-700',
-    'bg-pink-700',
-    'bg-rose-700',
-    'bg-purple-700',
-    'bg-cyan-700',
-    'bg-teal-700',
-    'bg-emerald-700',
-    'bg-lime-700',
-    'bg-green-700',
-    'bg-amber-700',
     'bg-zinc-200',
     'bg-slate-200',
     'bg-neutral-200',