🎨 style: refactor and re-styling filter form component

packages/frontend/src/components/projects/project/deployments/FilterForm.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { DateRange } from 'react-day-picker';
 
-import { IconButton, Option, Select } from '@material-tailwind/react';
-
-import SearchBar from '../../../SearchBar';
-import DatePicker from '../../../DatePicker';
+import { Input } from 'components/shared/Input';
+import { CrossCircleIcon, SearchIcon } from 'components/shared/CustomIcon';
+import { DatePicker } from 'components/shared/DatePicker';
+import { Value } from 'react-calendar/dist/cjs/shared/types';
+import { Select, SelectOption } from 'components/shared/Select';
 
 export enum StatusOptions {
   ALL_STATUS = 'All status',
@@ -16,7 +16,7 @@ export enum StatusOptions {
 export interface FilterValue {
   searchedBranch: string;
   status: StatusOptions;
-  updateAtRange?: DateRange;
+  updateAtRange?: Value;
 }
 
 interface FilterFormProps {
@@ -27,7 +27,7 @@ interface FilterFormProps {
 const FilterForm = ({ value, onChange }: FilterFormProps) => {
   const [searchedBranch, setSearchedBranch] = useState(value.searchedBranch);
   const [selectedStatus, setSelectedStatus] = useState(value.status);
-  const [dateRange, setDateRange] = useState<DateRange>();
+  const [dateRange, setDateRange] = useState<Value>();
 
   useEffect(() => {
     onChange({
@@ -43,46 +43,50 @@ const FilterForm = ({ value, onChange }: FilterFormProps) => {
     setDateRange(value.updateAtRange);
   }, [value]);
 
+  const statusOptions = Object.values(StatusOptions)
+    .map((status) => ({
+      label: status,
+      value: status,
+    }))
+    .filter((status) => status.value !== StatusOptions.ALL_STATUS);
+
+  const handleReset = () => {
+    setSearchedBranch('');
+  };
+
   return (
-    <div className="grid grid-cols-8 gap-2 text-sm text-gray-600">
-      <div className="col-span-4">
-        <SearchBar
+    <div className="xl:grid xl:grid-cols-8 flex flex-col xl:gap-3 gap-0">
+      <div className="col-span-4 flex items-center">
+        <Input
           placeholder="Search branches"
+          leftIcon={<SearchIcon />}
+          rightIcon={
+            searchedBranch && <CrossCircleIcon onClick={handleReset} />
+          }
           value={searchedBranch}
-          onChange={(event) => setSearchedBranch(event.target.value)}
+          onChange={(e) => setSearchedBranch(e.target.value)}
         />
       </div>
-      <div className="col-span-2">
-        <DatePicker mode="range" selected={dateRange} onSelect={setDateRange} />
+      <div className="col-span-2 flex items-center">
+        <DatePicker
+          className="w-full"
+          selectRange
+          value={dateRange}
+          onChange={setDateRange}
+          onReset={() => setDateRange(undefined)}
+        />
       </div>
-      <div className="col-span-2 relative">
+      <div className="col-span-2 flex items-center">
         <Select
-          value={selectedStatus}
-          onChange={(value) => setSelectedStatus(value as StatusOptions)}
+          options={statusOptions}
+          clearable
           placeholder="All status"
-        >
-          {Object.values(StatusOptions).map((status) => (
-            <Option
-              className={status === StatusOptions.ALL_STATUS ? 'hidden' : ''}
-              key={status}
-              value={status}
-            >
-              ^ {status}
-            </Option>
-          ))}
-        </Select>
-        {selectedStatus !== StatusOptions.ALL_STATUS && (
-          <div className="absolute end-1 inset-y-0 my-auto h-8">
-            <IconButton
-              onClick={() => setSelectedStatus(StatusOptions.ALL_STATUS)}
-              className="rounded-full"
-              size="sm"
-              placeholder={''}
-            >
-              X
-            </IconButton>
-          </div>
-        )}
+          value={{ label: selectedStatus, value: selectedStatus }}
+          onChange={(item) =>
+            setSelectedStatus((item as SelectOption).value as StatusOptions)
+          }
+          onClear={() => setSelectedStatus(StatusOptions.ALL_STATUS)}
+        />
       </div>
     </div>
   );