feat(inputs): ✨ Add buttons input

apps/builder/components/board/graph/BlockNode/StepNode/StepNodeContent.tsx

@@ -0,0 +1,78 @@
+import { Flex, Text } from '@chakra-ui/react'
+import { Step, StartStep, BubbleStepType, InputStepType } from 'models'
+import { ChoiceItemsList } from './ChoiceInputStepNode/ChoiceItemsList'
+
+type Props = {
+  step: Step | StartStep
+  isConnectable?: boolean
+}
+export const StepNodeContent = ({ step }: Props) => {
+  switch (step.type) {
+    case BubbleStepType.TEXT: {
+      return (
+        <Flex
+          flexDir={'column'}
+          opacity={step.content.html === '' ? '0.5' : '1'}
+          className="slate-html-container"
+          dangerouslySetInnerHTML={{
+            __html:
+              step.content.html === ''
+                ? `<p>Click to edit...</p>`
+                : step.content.html,
+          }}
+        />
+      )
+    }
+    case InputStepType.TEXT: {
+      return (
+        <Text color={'gray.500'}>
+          {step.options?.labels?.placeholder ?? 'Type your answer...'}
+        </Text>
+      )
+    }
+    case InputStepType.NUMBER: {
+      return (
+        <Text color={'gray.500'}>
+          {step.options?.labels?.placeholder ?? 'Type your answer...'}
+        </Text>
+      )
+    }
+    case InputStepType.EMAIL: {
+      return (
+        <Text color={'gray.500'}>
+          {step.options?.labels?.placeholder ?? 'Type your email...'}
+        </Text>
+      )
+    }
+    case InputStepType.URL: {
+      return (
+        <Text color={'gray.500'}>
+          {step.options?.labels?.placeholder ?? 'Type your URL...'}
+        </Text>
+      )
+    }
+    case InputStepType.DATE: {
+      return (
+        <Text color={'gray.500'}>
+          {step.options?.labels?.from ?? 'Pick a date...'}
+        </Text>
+      )
+    }
+    case InputStepType.PHONE: {
+      return (
+        <Text color={'gray.500'}>
+          {step.options?.labels?.placeholder ?? 'Your phone number...'}
+        </Text>
+      )
+    }
+    case InputStepType.CHOICE: {
+      return <ChoiceItemsList step={step} />
+    }
+    case 'start': {
+      return <Text>{step.label}</Text>
+    }
+    default: {
+      return <Text>No input</Text>
+    }
+  }
+}