feat(input): fix margin in search input

COMPASS-DPG · Dec 13, 2023 · a8964bb · a8964bb
1 parent ee2ba06
commit a8964bb
Showing 1 changed file with 32 additions and 30 deletions.
diff --git a/src/components/Input/SearchInput.tsx b/src/components/Input/SearchInput.tsx
@@ -33,37 +33,39 @@ const SearchInput = ({
   };
 
   return (
-    <div className='m-[16px] flex max-w-[450px]  items-center justify-between rounded-full border px-[10px] py-[5px] shadow-md focus-within:border-blue-400 focus-within:ring-blue-400 '>
-      <div>
-        <svg
-          className='h-4 w-4 text-gray-500 dark:text-gray-400'
-          aria-hidden='true'
-          xmlns='http://www.w3.org/2000/svg'
-          fill='none'
-          viewBox='0 0 20 20'
-        >
-          <path
-            stroke='currentColor'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-            strokeWidth='2'
-            d='m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z'
-          />
-        </svg>
-      </div>
-      <div>
-        <input
-          type='text'
-          className={`block  rounded-3xl border-0
-        bg-white py-2.5 pl-2 pr-[60px] text-sm text-gray-900 placeholder:font-medium placeholder:text-[#909090]
+    <div className='m-[16px] flex max-w-[450px] items-center justify-between  rounded-full border px-[10px] py-[5px] shadow-md focus-within:border-blue-400 focus-within:ring-blue-400 '>
+      <div className='flex items-center justify-center'>
+        <div>
+          <svg
+            className='h-4 w-4 text-gray-500 dark:text-gray-400'
+            aria-hidden='true'
+            xmlns='http://www.w3.org/2000/svg'
+            fill='none'
+            viewBox='0 0 20 20'
+          >
+            <path
+              stroke='currentColor'
+              strokeLinecap='round'
+              strokeLinejoin='round'
+              strokeWidth='2'
+              d='m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z'
+            />
+          </svg>
+        </div>
+        <div>
+          <input
+            type='text'
+            className={`block  rounded-3xl border-0
+        bg-white py-2.5 pr-[60px] text-sm text-gray-900 placeholder:font-medium placeholder:text-[#909090]
         focus:ring-0 `}
-          placeholder={placeholder}
-          value={value}
-          onChange={(e) => {
-            onChange(e?.target?.value), setShowCross(true);
-          }}
-          onKeyDown={handleKeyDown}
-        />
+            placeholder={placeholder}
+            value={value}
+            onChange={(e) => {
+              onChange(e?.target?.value), setShowCross(true);
+            }}
+            onKeyDown={handleKeyDown}
+          />
+        </div>
       </div>
       <div className='relative pr-3 pt-2'>
         {value != '' && showCross ? (