fix: refactor FieldSearchBar to own component file

opengovsg · Dec 2, 2024 · 74071ed · 74071ed
1 parent 2045e75
commit 74071ed
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 24 deletions.
diff --git a/...form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx b/...form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
@@ -1,14 +1,9 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { BiSearch } from 'react-icons/bi'
 import {
   Box,
   Divider,
   Flex,
-  Icon,
-  Input,
-  InputGroup,
-  InputLeftElement,
   TabList,
   TabPanel,
   TabPanels,
@@ -29,25 +24,7 @@ import {
   MyInfoFieldPanel,
   PaymentsInputPanel,
 } from './field-panels'
-
-const FieldSearchBar = ({
-  searchValue,
-  onChange,
-}: {
-  searchValue: string
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
-}) => (
-  <InputGroup>
-    <InputLeftElement>
-      <Icon as={BiSearch} color="secondary.500" fontSize="1.25rem" />
-    </InputLeftElement>
-    <Input
-      value={searchValue}
-      onChange={onChange}
-      placeholder="Search fields"
-    />
-  </InputGroup>
-)
+import { FieldSearchBar } from './FieldSearchBar'
 
 export const FieldListDrawer = (): JSX.Element => {
   const { t } = useTranslation()

diff --git a/...-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldSearchBar.tsx b/...-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldSearchBar.tsx
@@ -0,0 +1,21 @@
+import { BiSearch } from 'react-icons/bi'
+import { Icon, Input, InputGroup, InputLeftElement } from '@chakra-ui/react'
+
+export const FieldSearchBar = ({
+  searchValue,
+  onChange,
+}: {
+  searchValue: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+}) => (
+  <InputGroup>
+    <InputLeftElement>
+      <Icon as={BiSearch} color="secondary.500" fontSize="1.25rem" />
+    </InputLeftElement>
+    <Input
+      value={searchValue}
+      onChange={onChange}
+      placeholder="Search fields"
+    />
+  </InputGroup>
+)