Create Color Picker Component

src/Pages/BookingScreen/Components/UtillComponents/ColorsSelected.jsx

@@ -0,0 +1,130 @@
+import { Modal } from "antd";
+import { CloseOutlined, PlusOutlined } from "@ant-design/icons";
+import { SwatchesPicker } from "react-color";
+import { useEffect, useState } from "react";
+import Buttons from "../../../../Components/Forms/Buttons";
+
+const ColorsSelected = ({ open, onClose, onSave, initial = {} }) => {
+  const [colorType, setColorType] = useState("background");
+  const [bgColor, setBgColor] = useState(initial.background || "#ffffff");
+  const [fontColor, setFontColor] = useState(initial.font || "#000000" );
+
+  // reset when modal is opened with different initial colors
+  useEffect(() => {
+    if (initial.background) setBgColor(initial.background);
+    if (initial.font) setFontColor(initial.font);
+  }, [initial, open]);
+
+  const handleColorChange = (color) => {
+    if (colorType === "background") {
+      setBgColor(color.hex);
+    } else {
+      setFontColor(color.hex);
+    }
+  };
+
+  const handleSave = () => {
+    onSave({
+      background: bgColor,
+      font: fontColor,
+    });
+    onClose();
+  };
+
+  return (
+    <Modal
+      open={open}
+      title="Colors"
+      onCancel={onClose}
+      closeIcon={<CloseOutlined />}
+      footer={null}
+      width={400}
+    >
+   
+
+      {/* ✅ Selected Color Preview */}
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          border: "1px solid #ccc",
+          padding: "10px",
+          borderRadius: "8px",
+          marginBottom: "15px",
+        }}
+      >
+   <div
+  style={{
+    display: "flex",
+    justifyContent: "space-between",
+    gap:'10px',
+  }}
+>
+  {/* Background Preview */}
+  <div
+    onClick={() => setColorType("background")}
+    style={{
+      cursor: "pointer",
+      padding: "5px",
+      borderRadius: "6px",
+      border:
+        colorType === "background"
+          ? "2px solid #901D77"
+          : "1px solid transparent",
+    }}
+  >
+    <p style={{ fontSize: 12, fontWeight: 600 }}>
+      Background
+    </p>
+    <div
+      style={{
+        
+        width: 40,
+        height: 25,
+        backgroundColor: bgColor,
+        borderRadius: 5,
+        border: "1px solid #000",
+      }}
+    />
+  </div>
+
+  {/* Font Preview */}
+  <div
+    onClick={() => setColorType("font")}
+    style={{
+      cursor: "pointer",
+      padding: "5px",
+      borderRadius: "6px",
+      border:
+        colorType === "font"
+          ? "2px solid #901D77"
+          : "1px solid transparent",
+    }}
+  >
+    <p style={{ fontSize: 12, fontWeight: 600 }}>
+      Font
+    </p>
+    <div
+      style={{
+        width: 40,
+        height: 25,
+        backgroundColor: fontColor,
+        borderRadius: 5,
+        border: "1px solid #000",
+      }}
+    />
+  </div>
+</div>
+      </div>
+
+      {/* Color Picker */}
+      <SwatchesPicker onChange={handleColorChange} />
+
+      <button className="colorBtn" onClick={handleSave}>
+        SAVE
+      </button>
+    </Modal>
+  );
+};
+
+export default ColorsSelected;