🦴 Add share page backbone

apps/builder/components/share/ShareContent.tsx

@@ -0,0 +1,35 @@
+import { Flex, Heading, Stack } from '@chakra-ui/react'
+import { useTypebot } from 'contexts/TypebotContext'
+import React from 'react'
+import { parseDefaultPublicId } from 'services/typebots'
+import { EditableUrl } from './EditableUrl'
+
+export const ShareContent = () => {
+  const { typebot, updatePublicId } = useTypebot()
+
+  const handlePublicIdChange = (publicId: string) => {
+    if (publicId === typebot?.publicId) return
+    updatePublicId(publicId)
+  }
+  return (
+    <Flex h="full" w="full" justifyContent="center" align="flex-start">
+      <Stack maxW="1000px" w="full" pt="10" spacing={6}>
+        <Heading fontSize="2xl" as="h1">
+          Your typebot link
+        </Heading>
+        {typebot && (
+          <EditableUrl
+            publicId={
+              typebot?.publicId ??
+              parseDefaultPublicId(typebot.name, typebot.id)
+            }
+            onPublicIdChange={handlePublicIdChange}
+          />
+        )}
+        <Heading fontSize="2xl" as="h1">
+          Embed your typebot
+        </Heading>
+      </Stack>
+    </Flex>
+  )
+}