docs(share): 📝 Add embed instructions

apps/builder/components/share/integrations/modals/React/ReactInstructions.tsx

@@ -0,0 +1,86 @@
+import { Stack, Text } from '@chakra-ui/react'
+import { CodeEditor } from 'components/shared/CodeEditor'
+
+type Props = {
+  type: 'standard' | 'popup' | 'bubble'
+}
+
+export const ReactInstructions = ({ type }: Props) => {
+  switch (type) {
+    case 'standard': {
+      return <StandardInstructions />
+    }
+    case 'popup': {
+      return <PopupInstructions />
+    }
+    case 'bubble': {
+      return <BubbleInstructions />
+    }
+  }
+}
+
+const StandardInstructions = () => {
+  // const [inputValues, setInputValues] = useState({
+  //   heightLabel: '100%',
+  //   widthLabel: '100%',
+  // })
+
+  return (
+    <Stack spacing={4}>
+      {/* <InstallPackageInstruction /> */}
+      {/* <StandardEmbedWindowSettings
+        onUpdateWindowSettings={(settings) => setInputValues({ ...settings })}
+      /> */}
+      {/* <Text>{t('insert-the-typebot-container')}</Text>
+      <StandardReactDiv {...inputValues} /> */}
+    </Stack>
+  )
+}
+
+const PopupInstructions = () => {
+  // const [inputValue, setInputValue] = useState(0)
+
+  return (
+    <Stack spacing={4}>
+      {/* <InstallPackageInstruction />
+      <PopupEmbedSettings
+        onUpdateSettings={(settings) => setInputValue(settings.delay ?? 0)}
+      />
+      <Text>{t('initialize-the-typebot')}</Text>
+      <PopupReactCode withStarterVariables={true} delay={inputValue} /> */}
+    </Stack>
+  )
+}
+
+const BubbleInstructions = () => {
+  // const { t } = useTranslation()
+  // const [inputValues, setInputValues] = useState<
+  //   Pick<BubbleParams, 'proactiveMessage' | 'button'>
+  // >({
+  //   proactiveMessage: undefined,
+  //   button: {
+  //     color: '',
+  //     iconUrl: '',
+  //   },
+  // })
+
+  return (
+    <Stack spacing={4}>
+      {/* <InstallPackageInstruction />
+      <ChatEmbedSettings
+        onUpdateSettings={(settings) => setInputValues({ ...settings })}
+      />
+      <Text>{t('initialize-the-typebot')}</Text>
+      <ChatReactCode withStarterVariables={true} {...inputValues} mt={4} /> */}
+    </Stack>
+  )
+}
+
+const InstallPackageInstruction = () => {
+  return (
+    <Stack>
+      <Text>Install the package:</Text>
+      <CodeEditor value={`npm install typebot-js`} isReadOnly />
+    </Stack>
+  )
+}