change color buttons color

appsaeed · Mar 21, 2024 · 4a1f46f · 4a1f46f
1 parent a81a2fa
commit 4a1f46f
Showing 1 changed file with 8 additions and 5 deletions.
diff --git a/src/components/buttons/ButtonCircleColor.tsx b/src/components/buttons/ButtonCircleColor.tsx
@@ -6,12 +6,15 @@ interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 export default function ButtonCircleColor({ color, checked, ...props }: Props) {
-    const colour = (color && color != "") ? color : 'neutral';
+    const colour: string = (color && color != "") ? color : 'neutral';
+    const colors: { [key: string]: string } = {
+        "red": cn("border-red-400 hover:bg-red-500", { "bg-red-600": checked }),
+        "green": cn("border-green-400 hover:bg-green-500", { "bg-green-600": checked }),
+        "yellow": cn("border-yellow-400 hover:bg-yellow-500", { "bg-yellow-600": checked }),
+        "neutral": cn("border-neutral-400 hover:bg-neutral-500", { "bg-neutral-600": checked }),
+    }
     return (
-        <button {...props} className={cn(`h-4 w-4 rounded-full border-2 cursor-pointer border-${colour}-400 hover:bg-${colour}-500`,
-            {
-                [`bg-${colour}-600`]: checked,
-            })} >
+        <button {...props} className={cn(`h-4 w-4 rounded-full border-2 cursor-pointer`, colors[colour])} >
 
         </button>
     )