added marign for select item

src/components/common/SelectMultiple.jsx

@@ -1,21 +1,21 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from "react";
-import { useFormContext } from 'react-hook-form';
+import { useFormContext } from "react-hook-form";
-import './MultiSelectDropdown.css';
+import "./MultiSelectDropdown.css";
 
 const SelectMultiple = ({
   name,
   options = [],
-  label = 'Select options',
+  label = "Select options",
-  labelKey = 'name',
+  labelKey = "name",
-  valueKey = 'id',
+  valueKey = "id",
-  placeholder = 'Please select...',
+  placeholder = "Please select...",
-  IsLoading = false
+  IsLoading = false,
 }) => {
   const { setValue, watch } = useFormContext();
   const selectedValues = watch(name) || [];
 
   const [isOpen, setIsOpen] = useState(false);
-  const [searchText, setSearchText] = useState('');
+  const [searchText, setSearchText] = useState("");
   const dropdownRef = useRef(null);
 
   useEffect(() => {
@@ -24,8 +24,8 @@ const SelectMultiple = ({
         setIsOpen(false);
       }
     };
-    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
   const handleCheckboxChange = (value) => {
@@ -44,35 +44,37 @@ const SelectMultiple = ({
     <div ref={dropdownRef} className="multi-select-dropdown-container">
       <label className="form-label mb-1">{label}</label>
 
-   <div
+      <div
-  className="multi-select-dropdown-header"
+        className="multi-select-dropdown-header"
-  onClick={() => setIsOpen((prev) => !prev)}
+        onClick={() => setIsOpen((prev) => !prev)}
->
+      >
-  <span
+        <span
-    className={
+          className={
-      selectedValues.length > 0
+            selectedValues.length > 0
-        ? 'placeholder-style-selected'
+              ? "placeholder-style-selected"
-        : 'placeholder-style'
+              : "placeholder-style"
-    }
+          }
-  >
+        >
-    <div className="selected-badges-container">
+          <div className="selected-badges-container">
-      {selectedValues.length > 0 ? (
+            {selectedValues.length > 0 ? (
-        selectedValues.map((val) => {
+              selectedValues.map((val) => {
-          const found = options.find((opt) => opt[valueKey] === val);
+                const found = options.find((opt) => opt[valueKey] === val);
-          return (
+                return (
-            <span key={val} className="badge badge-selected-item mx-1 mb-1">
+                  <span
-              {found ? found[labelKey] : ''}
+                    key={val}
-            </span>
+                    className="badge badge-selected-item mx-1 mb-1"
-          );
+                  >
-        })
+                    {found ? found[labelKey] : ""}
-      ) : (
+                  </span>
-        <span className="placeholder-text">{placeholder}</span>
+                );
-      )}
+              })
-    </div>
+            ) : (
-  </span>
+              <span className="placeholder-text">{placeholder}</span>
-  <i className="bx bx-chevron-down"></i>
+            )}
-</div>
+          </div>
-
+        </span>
+        <i className="bx bx-chevron-down"></i>
+      </div>
 
       {isOpen && (
         <div className="multi-select-dropdown-options">
@@ -94,7 +96,9 @@ const SelectMultiple = ({
             return (
               <div
                 key={valueVal}
-                className={`multi-select-dropdown-option ${isChecked ? 'selected' : ''}`}
+                className={`multi-select-dropdown-option ${
+                  isChecked ? "selected" : ""
+                }`}
               >
                 <input
                   type="checkbox"
@@ -105,14 +109,16 @@ const SelectMultiple = ({
                 <label className="text-secondary">{labelVal}</label>
               </div>
             );
-          } )}
+          })}
           {!IsLoading && filteredOptions.length === 0 && (
-            <div className='multi-select-dropdown-Not-found'>
+            <div className="multi-select-dropdown-Not-found">
-              <label className="text-muted">Not Found {`'${searchText}'`}</label>
+              <label className="text-muted">
+                Not Found {`'${searchText}'`}
+              </label>
             </div>
           )}
           {IsLoading && filteredOptions.length === 0 && (
-             <div className='multi-select-dropdown-Not-found'>
+            <div className="multi-select-dropdown-Not-found">
               <label className="text-muted">Loading...</label>
             </div>
           )}