RC-7-home-page (#5)

https://ru.yougile.com/team/a605078664af/#chat:2ae00178ba0d
Reviewed-on: #5

src/app/main/shared-components/SearchInput.js

@@ -0,0 +1,55 @@
+import { forwardRef, memo, useCallback } from 'react';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
+import _ from '@lodash';
+
+const StyledTextField = forwardRef((props, ref) => (
+  <TextField
+    InputProps={{
+      sx: {
+        background: (theme) => theme.palette.background.paper,
+        borderRadius: '15px',
+        borderColor: (theme) => theme.palette.secondary.light,
+        borderWidth: '1px',
+        boxShadow: '1px 1px 4px 0px rgba(0, 0, 0, 0.25)',
+      },
+    }}
+    {...props}
+    ref={ref}
+  />
+));
+
+function SearchInput({ mode, placeholder, btnText, query, onType, onSearch }) {
+  const isSimpleMode = mode === 'simple';
+
+  const debouncedOnType = useCallback(_.debounce(onType, 250), [onType]);
+
+  return (
+    <form className="flex items-center gap-20">
+      <StyledTextField
+        type="text"
+        variant="outlined"
+        className="max-w-[620px] w-full bourder-0"
+        defaultValue={query}
+        placeholder={placeholder}
+        onChange={debouncedOnType}
+      />
+
+      {isSimpleMode && (
+        <Button
+          variant="contained"
+          color="inherit"
+          className="text-center text-base text-primary-light font-semibold  tracking-widest uppercase rounded-2xl bg-secondary-light shadow hover:shadow-hover hover:shadow-secondary-light ease-in-out duration-300"
+          aria-label={btnText}
+          type="button"
+          size="large"
+          onClick={onSearch}
+        >
+          {btnText}
+        </Button>
+      )}
+    </form>
+  );
+}
+
+export default memo(SearchInput);