enhancement: added startAdornment for input

Author: ihornovykov

src/components/common/layout/page-layout/footer/constants/index.ts

@@ -8,8 +8,8 @@ export const links: Links = {
       href: '/',
     },
     {
-      title: 'Організація',
-      href: '/organization',
+      title: 'Організації',
+      href: '/organizations',
     },
     {
       title: 'Ціни',

src/components/common/ui/input/Input.styles.ts

@@ -4,7 +4,7 @@ import { InputVariant } from '@/components/common/ui/input/types';
 
 export const formControl = (variant: InputVariant): SxProps<Theme> => ({
   '.MuiInputBase-root': {
-    m: '10px 0 0 0',
+    m: 0,
     border: '2px solid',
     borderColor: 'gray.400',
 

src/components/common/ui/input/Input.tsx

@@ -1,7 +1,11 @@
 'use client';
 
 import React, { FC, useState } from 'react';
-import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
+import {
+  EyeIcon,
+  EyeSlashIcon,
+  MagnifyingGlassIcon,
+} from '@heroicons/react/24/outline';
 import {
   FormControl,
   IconButton,
@@ -28,6 +32,7 @@ interface InputProps extends InputPropsMUI {
   password?: boolean;
   sx?: SxProps<Theme>;
   fullWidth?: boolean;
+  isSearch?: boolean;
 }
 
 const Input: FC<InputProps> = ({
@@ -39,6 +44,7 @@ const Input: FC<InputProps> = ({
   password = false,
   sx = {},
   fullWidth = false,
+  isSearch = false,
   ...props
 }) => {
   const [showPassword, setShowPassword] = useState(!password);
@@ -47,16 +53,22 @@ const Input: FC<InputProps> = ({
     setShowPassword((prevShowPassword) => !prevShowPassword);
   };
 
-  const eyeColor =
+  const iconColor =
     variant === 'white' ? theme.palette.gray[300] : theme.palette.gray[400];
 
+  const startAdornment = isSearch ? (
+    <InputAdornment position="start">
+      <MagnifyingGlassIcon width={24} height={24} color={iconColor} />
+    </InputAdornment>
+  ) : null;
+
   const endAdornment = password ? (
     <InputAdornment position="end">
       <IconButton edge="end" onClick={handleTogglePasswordVisibility}>
         {showPassword ? (
-          <EyeIcon width={24} height={24} color={eyeColor} />
+          <EyeIcon width={24} height={24} color={iconColor} />
         ) : (
-          <EyeSlashIcon width={24} height={24} color={eyeColor} />
+          <EyeSlashIcon width={24} height={24} color={iconColor} />
         )}
       </IconButton>
     </InputAdornment>
@@ -77,6 +89,7 @@ const Input: FC<InputProps> = ({
         </InputLabel>
       )}
       <InputMUI
+        startAdornment={startAdornment}
         endAdornment={endAdornment}
         sx={styles.input(variant)}
         disableUnderline