Merge pull request #203 from pedrolivaresanchez/fix-doble-label-defau…

…lt-true-filter fix: double label in volunteers filter & disable default true
pedrolivaresanchez · Nov 12, 2024 · 3f8008c · 3f8008c
2 parents d3e1ab1 + 92743c9
commit 3f8008c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 19 deletions.
diff --git a/src/app/casos-activos/solicitudes/page.tsx b/src/app/casos-activos/solicitudes/page.tsx
@@ -41,7 +41,7 @@ function Solicitudes() {
     urgencia: searchParams.get('urgencia') || 'todas',
     tipoAyuda: searchParams.get('tipoAyuda') || 'todas',
     pueblo: searchParams.get('pueblo') || 'todos',
-    soloSinAsignar: searchParams.get('soloSinAsignar') || 'true',
+    soloSinAsignar: searchParams.get('soloSinAsignar') || 'false',
   });
 
   const updateFilter = useCallback(
@@ -195,7 +195,7 @@ function Solicitudes() {
               ))}
             </select>
           </div>
-          <div className="flex flex-row flex-1 justify-end">
+          <div className="flex flex-row flex-1 justify-end pt-4">
             <Toggle
               handleChange={handleToggleChange}
               checked={isStringTrue(filtroData.soloSinAsignar)}

diff --git a/src/components/Toggle.tsx b/src/components/Toggle.tsx
@@ -5,29 +5,27 @@ type ToggleProps = { handleChange: React.ChangeEventHandler<HTMLInputElement>; c
 export const Toggle = ({ checked, handleChange, label }: ToggleProps) => {
   return (
     <div className="flex items-center space-x-2">
-      <label htmlFor="toggle" className="font-medium">
+      <label htmlFor="toggle" className="font-medium cursor-pointer flex flex-row gap-2 justify-center">
         {label}
-      </label>
-      <div
-        className={`relative inline-block w-10 h-6 rounded-full transition-colors duration-300 ${
-          checked ? 'bg-green-500' : 'bg-gray-300'
-        }`}
-      >
-        <input
-          type="checkbox"
-          id="toggle"
-          className="absolute w-0 h-0 opacity-0"
-          checked={checked}
-          onChange={handleChange}
-        />
-        <label htmlFor="toggle">
+        <div
+          className={`relative inline-block w-10 h-6 rounded-full transition-colors duration-300 ${
+            checked ? 'bg-green-500' : 'bg-gray-300'
+          }`}
+        >
+          <input
+            type="checkbox"
+            id="toggle"
+            className="absolute w-0 h-0 opacity-0"
+            checked={checked}
+            onChange={handleChange}
+          />
           <span
             className={`absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white transition-transform duration-300 transform ${
               checked ? 'translate-x-4' : ''
             }`}
           ></span>
-        </label>
-      </div>
+        </div>
+      </label>
     </div>
   );
 };