From 94b1c795617d6480b45b755e1cdd75fef0fc633d Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Fri, 29 Nov 2024 23:34:12 +0800
Subject: [PATCH] feat: add mfb button beside search bar

---
 .../FieldListDrawer/FieldListDrawer.tsx       | 43 ++++++++++++++-----
 1 file changed, 32 insertions(+), 11 deletions(-)

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
index 73d31c1749..2fd9cb5730 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
+++ b/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,6 +32,22 @@ 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,
@@ -37,16 +55,19 @@ const FieldSearchBar = ({
   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 => {