feat: enhance search input

src/app/admin/admins/page.tsx

@@ -9,7 +9,6 @@ import axios from "axios"
 import Image from "next/image"
 import { useSession } from "next-auth/react"
 import { DropdownMenu } from "radix-ui"
-import Link from "next/link"
 import { icons } from "#/assets/icons"
 import { useState } from "react"
 import Form from "#/components/form/form"
@@ -423,7 +422,11 @@ export default function Admins (){
                     
                     />
 
-                  <FloatingLabelInput name="search" placeholder="Effectuer une recherche" type="text" onChange={(value) => table.setGlobalFilter(value)} />
+                  <FloatingLabelInput name="search" placeholder="Effectuer une recherche" type="search" onChange={(value) => table.setGlobalFilter(value)} 
+                    button={
+                      <Image alt="" src={icons.filterIcon} className="cursor-pointer" />
+                    }
+                  />
                 </div>
               </div>
             </>

src/app/globals.css

@@ -57,9 +57,16 @@ body {
   z-index: 1;
 }
 
-.btn-floating {
+.btn-floating-right {
   position: absolute;
-  right: 12px;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.btn-floating-left {
+  position: absolute;
+  left: 8px;
   top: 50%;
   transform: translateY(-50%);
 }

src/components/floatingLabelInput.tsx

@@ -40,7 +40,7 @@ export default function FloatingLabelInput({
                 <option key={index} value={option}>{option}</option>
               ))}
             </select>
-            {button && <div className="btn-floating">{button}</div>}
+            {button && <div className="btn-floating-right">{button}</div>}
           </div>
         );
       
@@ -59,7 +59,7 @@ export default function FloatingLabelInput({
               <button
                 type="button"
                 onClick={() => setShowPassword(!showPassword)}
-                className="btn-floating text-gray-500 hover:text-gray-700 focus:outline-none"
+                className="btn-floating-right text-gray-500 hover:text-gray-700 focus:outline-none"
               >
                 {showPassword ? (
                   <Image 
@@ -80,7 +80,26 @@ export default function FloatingLabelInput({
             )}
           </div>
         );
-      
+
+
+        case 'search':
+          return (
+            <div className="relative w-full">
+              <div className='btn-floating-left'>
+                <Image alt='' src={icons.searchIcon} />
+              </div>
+              <input
+                type="text"
+                placeholder={placeholder}
+                className="focus:ring-2 focus:ring-blue-500 outline-none px-10 py-3 w-full text-black border border-[#d1d5dc] rounded-full"
+                name={name}
+                defaultValue={defaultValue}
+                onChange={handleChange}
+              />
+              {button && <div className="btn-floating-right">{button}</div>}
+            </div>
+          );
+        
       default:
         return (
           <div className="relative w-full">
@@ -92,7 +111,7 @@ export default function FloatingLabelInput({
               defaultValue={defaultValue}
               onChange={handleChange}
             />
-            {button && <div className="absolute right-0 top-1/2 transform -translate-y-1/2">{button}</div>}
+            {button && <div className="btn-floating-right">{button}</div>}
           </div>
         );
     }

src/types/index.ts

@@ -4,7 +4,7 @@ import { ZodSchema } from "zod";
 export interface FloatingLabelInputProps {
     label?: string;
     placeholder?: string;
-    type: 'text' | 'password' | 'select' | 'email' | 'number' | 'hidden';
+    type: 'text' | 'password' | 'select' | 'email' | 'number' | 'hidden' | 'search';
     options?: string[];
     button?: React.ReactNode;
     showPasswordToggle?: boolean;