overall updates

src/components/nearle_components/SearchBar.js

@@ -0,0 +1,58 @@
+// SearchBar.jsx
+import React, { useEffect, useRef } from 'react';
+import { FormControl, OutlinedInput, InputAdornment, IconButton, useTheme } from '@mui/material';
+import SearchOutlined from '@mui/icons-material/SearchOutlined';
+import ClearIcon from '@mui/icons-material/Clear';
+
+const SearchBar = ({ value, onChange, sx, placeholder = 'Search (Ctrl + K)' }) => {
+  const theme = useTheme();
+  const inputRef = useRef(null);
+
+  /* ============================================= || handleKeyPress (CTRL + K) and ESC ||============================================= */
+  useEffect(() => {
+    const handleKeyPress = (event) => {
+      // Focus input with CTRL + K / CMD + K
+      if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        inputRef.current?.focus();
+      }
+
+      // ESC removes focus
+      if (event.key === 'Escape' && document.activeElement === inputRef.current) {
+        inputRef.current.blur();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyPress);
+    return () => document.removeEventListener('keydown', handleKeyPress);
+  }, []);
+
+  return (
+    <FormControl fullWidth sx={{}}>
+      <OutlinedInput
+        inputRef={inputRef}
+        placeholder={placeholder}
+        sx={{
+          borderRadius: 0,
+          ...sx
+        }}
+        value={value}
+        onChange={onChange}
+        autoComplete="off"
+        size="large"
+        startAdornment={
+          <InputAdornment position="start" sx={{ mr: -0.5, color: theme.palette.primary.main }}>
+            <SearchOutlined />
+          </InputAdornment>
+        }
+        endAdornment={
+          <IconButton sx={{ visibility: value ? 'visible' : 'hidden' }} onClick={() => onChange({ target: { value: '' } })}>
+            <ClearIcon style={{ fontSize: 'large', color: theme.palette.primary.main }} />
+          </IconButton>
+        }
+      />
+    </FormControl>
+  );
+};
+
+export default SearchBar;