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

apps/builder/components/share/codeSnippets/Popup/EmbedSettings.tsx

@@ -0,0 +1,55 @@
+import {
+  StackProps,
+  Stack,
+  Flex,
+  Heading,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  NumberIncrementStepper,
+  NumberDecrementStepper,
+} from '@chakra-ui/react'
+import { useState, useEffect } from 'react'
+import { PopupParams } from 'typebot-js'
+
+type PopupEmbedSettingsProps = {
+  onUpdateSettings: (windowSettings: Pick<PopupParams, 'delay'>) => void
+}
+export const PopupEmbedSettings = ({
+  onUpdateSettings,
+  ...props
+}: PopupEmbedSettingsProps & StackProps) => {
+  const [inputValue, setInputValue] = useState(0)
+
+  useEffect(() => {
+    onUpdateSettings({
+      delay: inputValue * 1000,
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inputValue])
+
+  return (
+    <Stack {...props}>
+      <Flex alignItems="center" justifyContent="space-between">
+        <Heading fontSize="md" fontWeight="semibold">
+          Popup settings
+        </Heading>
+      </Flex>
+
+      <Flex justify="space-between" align="center" mb="2">
+        <p>Appearance delay</p>
+        <NumberInput
+          onChange={(_, val) => setInputValue(val)}
+          value={inputValue}
+          min={0}
+        >
+          <NumberInputField />
+          <NumberInputStepper>
+            <NumberIncrementStepper />
+            <NumberDecrementStepper />
+          </NumberInputStepper>
+        </NumberInput>
+      </Flex>
+    </Stack>
+  )
+}