Merge branch 'hexcolorcode' of https://github.com/harini-1597/palette…

…gram into harini-1597-hexcolorcode

src/components/core/colorPicker/index.tsx

@@ -3,26 +3,38 @@ import { useState } from "react";
 
 type ColorpickerTypes = {
   colors: {
-    color01: string;
-    color02: string;
-    color03: string;
-    color04: string;
+    [key: string]: string;
   };
   isPalleteTouched: boolean;
   setColors: any;
   setTouched: any;
 };
 
+
 // eslint-disable-next-line react/prop-types
 function Colorpicker({ colors, setColors, setTouched, isPalleteTouched }: ColorpickerTypes) {
   const [selectedColorSection, setColorSection] = useState<number | null>(null);
+  const [colorInputs, setColorInputs] = useState(colors);
+
   const changeHandler = (color: string) => {
     if (!isPalleteTouched) {
       setTouched(true);
     }
-    if (typeof color === "string")
-      setColors({ ...colors, [`color0` + selectedColorSection]: color });
+    if (typeof color === "string") {
+      const updatedColors = { ...colors, [`color0${selectedColorSection}`]: color };
+      setColors(updatedColors);
+      setColorInputs(updatedColors);
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>, section: number) => {
+    const value = e.target.value;
+    setColorInputs({ ...colorInputs, [`color0${section}`]: value });
+    if (/^#([0-9A-F]{3}){1,2}$/i.test(value)) {
+      changeHandler(value);
+    }
   };
+
   const showPicker = (id: number) => {
     if (id === selectedColorSection) {
       setColorSection(null);
@@ -33,59 +45,46 @@ function Colorpicker({ colors, setColors, setTouched, isPalleteTouched }: Colorp
 
   return (
     <>
-      <div className="relative">
-        <div className="w-[300px] rounded-[0.8rem] h-[200px] bg-[#888A8A] mx-auto flex">
-          <div
-            onClick={() => showPicker(1)}
-            className="cursor-pointer w-full rounded-tl-[0.8rem] rounded-bl-[0.8rem]"
-            style={{
-              backgroundColor: (typeof colors.color01 === "string" && colors.color01) || "",
-            }}
-          ></div>
-          <div
-            onClick={() => showPicker(2)}
-            className="cursor-pointer w-full "
-            style={{
-              backgroundColor: (typeof colors.color02 === "string" && colors.color02) || "",
-            }}
-          ></div>
-          <div
-            onClick={() => showPicker(3)}
-            className="cursor-pointer w-full"
-            style={{
-              backgroundColor: (typeof colors.color03 === "string" && colors.color03) || "",
-            }}
-          ></div>
-          <div
-            onClick={() => showPicker(4)}
-            className="cursor-pointer w-full rounded-tr-[0.8rem] rounded-br-[0.8rem]"
-            style={{
-              backgroundColor: (typeof colors.color04 === "string" && colors.color04) || "",
-            }}
-          ></div>
+      <div className="relative mx-auto">
+        <div className="relative pl-[70px] pr-2">
+        <div className="mx-auto w-[400px] rounded-[0.8rem] h-[175px] bg-[#888A8A] flex">
+          {['color01', 'color02', 'color03', 'color04'].map((color, index) => (
+            <div
+              key={color}
+              onClick={() => showPicker(index + 1)}
+              onKeyUp={(e) => { if (e.key === 'Enter') showPicker(index + 1); }}
+              className={`cursor-pointer w-full ${index === 0 ? 'rounded-tl-[0.8rem] rounded-bl-[0.8rem]' : ''} ${index === 3 ? 'rounded-tr-[0.8rem] rounded-br-[0.8rem]' : ''}`}
+              style={{
+                backgroundColor: colors[color],
+              }}
+            ></div>
+          ))}
+        </div>
+        <div className="flex justify-center mt-1 mx-20">
+          {['color01', 'color02', 'color03', 'color04'].map((color, index) => (
+            <input
+              key={color}
+              type="text"
+              value={colorInputs[color]}
+              onChange={(e) => handleInputChange(e, index + 1)}
+              placeholder="#000000"
+              className="w-20 text-center mx-2.5"
+            />
+          ))}
+        </div>
         </div>
         {selectedColorSection && (
-          <>
-            {/* <div className='fixed top-0 left-0 right-0 bottom-0' onClick={handleClose}></div> */}
-            <div className="absolute top-0">
-              <HexColorPicker
-                style={{ width: "100px" }}
-                onChange={changeHandler}
-                color={
-                  (selectedColorSection &&
-                    ((selectedColorSection === 1 && colors["color01"]) ||
-                      (selectedColorSection === 2 && colors["color02"]) ||
-                      (selectedColorSection === 3 && colors["color03"]) ||
-                      (selectedColorSection === 4 && colors["color04"]))) ||
-                  ""
-                }
-              />
-            </div>
-          </>
+          <div className="absolute top-0">
+            <HexColorPicker
+              style={{ width: "100px" }}
+              onChange={changeHandler}
+              color={colors[`color0${selectedColorSection}`]}
+            />
+          </div>
         )}
       </div>
 
-      {/* <div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">
+    {/* <div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">
         
         <div className="mb-3">
           <input
@@ -100,7 +99,6 @@ function Colorpicker({ colors, setColors, setTouched, isPalleteTouched }: Colorp
             maxLength={6}
           />
         </div>
-
         <div className="mb-3">
           <input
             type="text"
@@ -114,7 +112,6 @@ function Colorpicker({ colors, setColors, setTouched, isPalleteTouched }: Colorp
             maxLength={6}
           />
         </div>
-
         <div className="mb-3">
           <input
             type="text"
@@ -128,7 +125,6 @@ function Colorpicker({ colors, setColors, setTouched, isPalleteTouched }: Colorp
             maxLength={6}
           />
         </div>
-
         <div className="mb-3">
           <input
             type="text"