2
0

feat: ️ Getting started editor modal

This commit is contained in:
Baptiste Arnaud
2022-04-05 11:32:23 +02:00
parent 660b220f8d
commit 786908e9cf
5 changed files with 141 additions and 171 deletions

View File

@ -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