feat(inputs): ✨ Add Condition step

apps/builder/components/shared/DropdownList.tsx

@@ -0,0 +1,61 @@
+import {
+  Button,
+  Menu,
+  MenuButton,
+  MenuButtonProps,
+  MenuItem,
+  MenuList,
+  Stack,
+} from '@chakra-ui/react'
+import { ChevronLeftIcon } from 'assets/icons'
+import React from 'react'
+
+type Props<T> = {
+  currentItem: T
+  onItemSelect: (item: T) => void
+  items: T[]
+}
+
+export const DropdownList = <T,>({
+  currentItem,
+  onItemSelect,
+  items,
+  ...props
+}: Props<T> & MenuButtonProps) => {
+  const handleMenuItemClick = (operator: T) => () => {
+    onItemSelect(operator)
+  }
+  return (
+    <>
+      <Menu isLazy placement="bottom-end">
+        <MenuButton
+          as={Button}
+          rightIcon={<ChevronLeftIcon transform={'rotate(-90deg)'} />}
+          colorScheme="gray"
+          isTruncated
+          justifyContent="space-between"
+          textAlign="left"
+          {...props}
+        >
+          {currentItem}
+        </MenuButton>
+        <MenuList maxW="500px">
+          <Stack maxH={'35vh'} overflowY="scroll" spacing="0">
+            {items.map((item) => (
+              <MenuItem
+                key={item as unknown as string}
+                maxW="500px"
+                overflow="hidden"
+                whiteSpace="nowrap"
+                textOverflow="ellipsis"
+                onClick={handleMenuItemClick(item)}
+              >
+                {item}
+              </MenuItem>
+            ))}
+          </Stack>
+        </MenuList>
+      </Menu>
+    </>
+  )
+}

apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx

@@ -13,7 +13,7 @@ export const headerHeight = 56
 
 export const TypebotHeader = () => {
   const router = useRouter()
-  const { typebot } = useTypebot()
+  const { typebot, updateTypebot } = useTypebot()
   const { setRightPanel } = useEditor()
 
   const handleBackClick = () => {
@@ -23,6 +23,7 @@ export const TypebotHeader = () => {
     })
   }
 
+  const handleNameSubmit = (name: string) => updateTypebot({ name })
   return (
     <Flex
       w="full"
@@ -87,7 +88,7 @@ export const TypebotHeader = () => {
           />
           <EditableTypebotName
             name={typebot?.name}
-            onNewName={(newName) => console.log(newName)}
+            onNewName={handleNameSubmit}
           />
         </Flex>
       </Flex>