RC-14: create dashboard page

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

@@ -1,7 +1,14 @@
-import { forwardRef, memo, useCallback } from 'react';
-import TextField from '@mui/material/TextField';
-import Button from '@mui/material/Button';
 import _ from '@lodash';
+import Button from '@mui/material/Button';
+// import Select from '@mui/material/Select';
+import TextField from '@mui/material/TextField';
+import clsx from 'clsx';
+import { forwardRef, memo, useCallback } from 'react';
+
+const SEARCH_INPUT_MODES = {
+  simple: 'simple',
+  manual: 'manual',
+};
 
 const StyledTextField = forwardRef((props, ref) => (
   <TextField
@@ -19,28 +26,32 @@ const StyledTextField = forwardRef((props, ref) => (
   />
 ));
 
-function SearchInput({ mode, placeholder, btnText, query, onType, onSearch }) {
-  const isSimpleMode = mode === 'simple';
+function SearchInput({ className, mode, placeholder, btnText, query, onType, onSearch }) {
+  const isSimpleMode = mode === SEARCH_INPUT_MODES.simple;
+  const isManualMode = mode === SEARCH_INPUT_MODES.manual;
+  const hasBtn = isSimpleMode || isManualMode;
 
   const debouncedOnType = useCallback(_.debounce(onType, 250), [onType]);
 
   return (
-    <form className="flex items-center gap-20">
+    <form className={clsx('flex items-center gap-20', className)}>
       <StyledTextField
         type="text"
         variant="outlined"
-        className="max-w-[620px] w-full bourder-0"
+        className="w-full bourder-0"
         defaultValue={query}
-        placeholder={placeholder}
+        placeholder={placeholder ?? ''}
         onChange={debouncedOnType}
       />
 
-      {isSimpleMode && (
+      {/* {isManualMode && <Select />} */}
+
+      {hasBtn && (
         <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}
+          aria-label={btnText ?? ''}
           type="button"
           size="large"
           onClick={onSearch}