docs(share): 📝 Add code blocks in embed instructions

apps/builder/components/share/codeSnippets/Container/EmbedCode.tsx

@@ -0,0 +1,56 @@
+import { FlexProps } from '@chakra-ui/react'
+import parserHtml from 'prettier/parser-html'
+import prettier from 'prettier/standalone'
+import { parseInitContainerCode, typebotJsHtml } from '../params'
+import { IframeParams } from 'typebot-js'
+import { useTypebot } from 'contexts/TypebotContext'
+import { CodeEditor } from 'components/shared/CodeEditor'
+
+type ContainerEmbedCodeProps = {
+  widthLabel: string
+  heightLabel: string
+  withStarterVariables?: boolean
+  onCopied?: () => void
+}
+
+export const ContainerEmbedCode = ({
+  widthLabel,
+  heightLabel,
+}: ContainerEmbedCodeProps & FlexProps) => {
+  const { typebot } = useTypebot()
+
+  const snippet = prettier.format(
+    parseSnippet({
+      publishId: typebot?.publicId ?? '',
+      heightLabel,
+      widthLabel,
+    }),
+    {
+      parser: 'html',
+      plugins: [parserHtml],
+    }
+  )
+
+  return <CodeEditor value={snippet} lang="html" isReadOnly />
+}
+
+type SnippetProps = IframeParams &
+  Pick<ContainerEmbedCodeProps, 'widthLabel' | 'heightLabel'>
+
+const parseSnippet = ({
+  publishId,
+  customDomain,
+  backgroundColor,
+  hiddenVariables,
+  ...embedProps
+}: SnippetProps): string => {
+  const jsCode = parseInitContainerCode({
+    customDomain,
+    hiddenVariables,
+    backgroundColor,
+    publishId,
+  })
+  return `${typebotJsHtml}
+      <div id="typebot-container" style="width: ${embedProps.widthLabel}; height: ${embedProps.heightLabel};"></div>
+      <script>${jsCode}</script>`
+}