feat: refactor StyledSearchBar component and add search icon

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>

Author: amitamrutiya

src/custom/StyledSearchBar/StyledSearchBar.tsx

@@ -1,51 +1,58 @@
+import { SxProps, Theme, useTheme } from '@mui/material';
 import React from 'react';
-import { Box } from '../../base/Box';
-import { InputAdornment } from '../../base/Input';
-import { TextField } from '../../base/TextField';
+import { InputAdornment } from '../../base';
+import { SearchIcon } from '../../icons';
+import { InputAdornmentEnd, StyledSearchInput } from './style';
 
 interface SearchBarProps {
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   value?: string;
   width?: string;
-  label: string;
+  label?: string;
+  placeholder?: string;
+  sx?: SxProps<Theme>;
   endAdornment?: React.ReactNode;
 }
 
+/**
+ * StyledSearchBar component renders a search input field with customizable properties.
+ *
+ * @param {Object} props - The component props.
+ * @param {function} [props.onChange] - Function to handle the change event when the search input value changes.
+ * @param {string} [props.value] - The current value of the search input.
+ * @param {string} [props.label] - The label for the search input.
+ * @param {string} [props.placeholder] - The placeholder text for the search input.
+ * @param {Object} [props.sx] - The style object for the search input.
+ * @param {React.ReactNode} [props.endAdornment] - The element to display at the end of the search input.
+ *
+ * @returns {JSX.Element} The rendered StyledSearchBar component.
+ */
 function StyledSearchBar({
   onChange,
   value,
-  width,
   label,
-  endAdornment,
-  ...props
+  sx,
+  placeholder,
+  endAdornment
 }: SearchBarProps): JSX.Element {
+  const theme = useTheme();
+
   return (
-    <React.Fragment>
-      <Box
-        component="form"
-        sx={{
-          '& > :not(style)': { width }
-        }}
-        {...props}
-      >
-        <TextField
-          variant="outlined"
-          label={label}
-          fullWidth
-          type="search"
-          value={value}
-          onChange={onChange}
-          sx={{
-            margin: 'auto',
-            height: '5ch'
-          }}
-          placeholder="Search"
-          InputProps={{
-            endAdornment: <InputAdornment position="end">{endAdornment}</InputAdornment>
-          }}
-        />
-      </Box>
-    </React.Fragment>
+    <StyledSearchInput
+      type="search"
+      label={label}
+      fullWidth
+      value={value}
+      onChange={onChange}
+      sx={sx}
+      placeholder={placeholder ?? 'Search'}
+      startAdornment={
+        <InputAdornment position="start">
+          <SearchIcon fill={theme.palette.background.neutral?.default} />
+        </InputAdornment>
+      }
+      endAdornment={<InputAdornmentEnd position="end">{endAdornment}</InputAdornmentEnd>}
+    />
   );
 }
 

src/custom/StyledSearchBar/style.tsx

@@ -0,0 +1,21 @@
+import { styled } from '@mui/material';
+import { InputAdornment, OutlinedInput } from '../../base';
+
+export const StyledSearchInput = styled(OutlinedInput)(({ style }) => ({
+  width: '100%',
+  '@media (max-width: 590px)': {
+    marginLeft: '0.25rem',
+    paddingLeft: '0.25rem'
+  },
+  display: 'flex',
+  ...style
+}));
+
+export const InputAdornmentEnd = styled(InputAdornment)(({ theme }) => ({
+  borderLeft: `1px solid ${theme.palette.border.normal}`,
+  height: '30px',
+  paddingLeft: '10px',
+  '@media (max-width: 590px)': {
+    paddingLeft: '0px'
+  }
+}));