feat: add mfb button beside search bar

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { BiSearch } from 'react-icons/bi'
+import { BiSearch, BiSolidMagicWand } from 'react-icons/bi'
 import {
   Box,
+  Button,
   Divider,
   Flex,
   Icon,
@@ -14,6 +15,7 @@ import {
   TabPanels,
   Tabs,
   Text,
+  Tooltip,
 } from '@chakra-ui/react'
 
 import { Tab } from '~components/Tabs'
@@ -30,23 +32,42 @@ import {
   PaymentsInputPanel,
 } from './field-panels'
 
+const MagicFormBuilderButton = ({ ...styleProps }) => (
+  <Tooltip openDelay={800} hasArrow label="Create fields with AI">
+    <Button
+      padding="0"
+      backgroundColor="primary.200"
+      _hover={{
+        backgroundColor: 'primary.300',
+      }}
+      borderWidth={0}
+      {...styleProps}
+    >
+      <Icon as={BiSolidMagicWand} color="primary.500" fontSize="1.5rem" />
+    </Button>
+  </Tooltip>
+)
+
 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>
+  <>
+    <InputGroup>
+      <InputLeftElement>
+        <Icon as={BiSearch} color="secondary.500" fontSize="1.25rem" />
+      </InputLeftElement>
+      <Input
+        value={searchValue}
+        onChange={onChange}
+        placeholder="Search fields"
+      />
+      <MagicFormBuilderButton ml="0.5rem" />
+    </InputGroup>
+  </>
 )
 
 export const FieldListDrawer = (): JSX.Element => {