feat: ♿️ Getting started editor modal
This commit is contained in:
@ -1,19 +1,53 @@
|
||||
import { Flex } from '@chakra-ui/layout'
|
||||
import { Board } from 'layouts/editor/Board'
|
||||
import { Seo } from 'components/Seo'
|
||||
import { TypebotHeader } from 'components/shared/TypebotHeader'
|
||||
import { EditorContext } from 'contexts/EditorContext'
|
||||
import { EditorContext, RightPanel, useEditor } from 'contexts/EditorContext'
|
||||
import React from 'react'
|
||||
import { KBar } from 'components/shared/KBar'
|
||||
import { BoardMenuButton } from 'components/editor/BoardMenuButton'
|
||||
import { PreviewDrawer } from 'components/editor/preview/PreviewDrawer'
|
||||
import { StepsSideBar } from 'components/editor/StepsSideBar'
|
||||
import { Graph } from 'components/shared/Graph'
|
||||
import { GraphProvider } from 'contexts/GraphContext'
|
||||
import { GraphDndContext } from 'contexts/GraphDndContext'
|
||||
import { useTypebot } from 'contexts/TypebotContext'
|
||||
import { GettingStartedModal } from 'components/editor/GettingStartedModal'
|
||||
|
||||
const TypebotEditPage = () => {
|
||||
const { typebot, isReadOnly } = useTypebot()
|
||||
const { rightPanel } = useEditor()
|
||||
|
||||
return (
|
||||
<EditorContext>
|
||||
<Seo title="Editor" />
|
||||
<KBar />
|
||||
<Flex overflow="clip" h="100vh" flexDir="column" id="editor-container">
|
||||
<GettingStartedModal />
|
||||
<TypebotHeader />
|
||||
<Flex
|
||||
flex="1"
|
||||
pos="relative"
|
||||
h="full"
|
||||
background="#f4f5f8"
|
||||
backgroundImage="radial-gradient(#c6d0e1 1px, transparent 0)"
|
||||
backgroundSize="40px 40px"
|
||||
backgroundPosition="-19px -19px"
|
||||
>
|
||||
<GraphDndContext>
|
||||
<StepsSideBar />
|
||||
<GraphProvider
|
||||
blocks={typebot?.blocks ?? []}
|
||||
isReadOnly={isReadOnly}
|
||||
>
|
||||
{typebot && <Graph flex="1" typebot={typebot} />}
|
||||
<BoardMenuButton pos="absolute" right="40px" top="20px" />
|
||||
{rightPanel === RightPanel.PREVIEW && <PreviewDrawer />}
|
||||
</GraphProvider>
|
||||
</GraphDndContext>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</EditorContext>
|
||||
)
|
||||
}
|
||||
|
||||
const TypebotEditPage = () => (
|
||||
<EditorContext>
|
||||
<Seo title="Editor" />
|
||||
<KBar />
|
||||
<Flex overflow="clip" h="100vh" flexDir="column" id="editor-container">
|
||||
<TypebotHeader />
|
||||
<Board />
|
||||
</Flex>
|
||||
</EditorContext>
|
||||
)
|
||||
export default TypebotEditPage
|
||||
|
Reference in New Issue
Block a user