blsmedia/bot
2
0
Fork 0
Code Activity

feat(editor): ♿️ Add more getting started videos

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-04-06 11:11:49 +02:00
parent e9c3ec1e46
commit eb4feb61bd
1 changed files with 44 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
apps/builder/components/editor/GettingStartedModal.tsx
View File

@ -11,6 +11,12 @@ import {
ListItem,
ListIcon,
Text,
Accordion,
AccordionButton,
AccordionIcon,
AccordionItem,
AccordionPanel,
Box,
} from '@chakra-ui/react'
import { CheckSquareIcon } from 'assets/icons'
import { useRouter } from 'next/router'
@ -37,27 +43,27 @@ export const GettingStartedModal = () => {
<ListItem>
<ListIcon as={CheckSquareIcon} color="blue.500" mb="0.5" />
The left side bar contains blocks that you can drag and drop to
the canva
the board.
</ListItem>
<ListItem>
<ListIcon as={CheckSquareIcon} color="blue.500" mb="0.5" />
You can group blocks together by dragging them below or above
You can group blocks together by dropping them below or above
each other
</ListItem>
<ListItem>
<ListIcon as={CheckSquareIcon} color="blue.500" mb="0.5" />
Don't forget to connect blocks together
Connect the groups together
</ListItem>
<ListItem>
<ListIcon as={CheckSquareIcon} color="blue.500" mb="0.5" />
Preview your bot by clicking the preview button on the right
Preview your bot by clicking the preview button on the top right
</ListItem>
</List>
</Stack>
<Text>
Feel free to use the bottom-right bubble to contact if you have any
question 😃
Feel free to use the bottom-right bubble to reach out if you have
any question. I usually answer within the next 24 hours. 😃
</Text>
<Stack spacing={4}>
<Heading fontSize="xl">See it in action ({`<`} 5 minutes)</Heading>
@ -71,6 +77,38 @@ export const GettingStartedModal = () => {
allowFullScreen
style={{ borderRadius: '0.5rem' }}
/>
<Accordion allowToggle>
<AccordionItem>
<AccordionButton>
<Box flex="1" textAlign="left">
Other videos
</Box>
<AccordionIcon />
</AccordionButton>
<AccordionPanel py={10} as={Stack} spacing="10">
<iframe
width="100%"
height="315"
src="https://www.youtube.com/embed/6BudIC4GYNk"
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
style={{ borderRadius: '0.5rem' }}
/>
<iframe
width="100%"
height="315"
src="https://www.youtube.com/embed/ZuyDwFLRbfQ"
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
style={{ borderRadius: '0.5rem' }}
/>
</AccordionPanel>
</AccordionItem>
</Accordion>
</Stack>
</ModalBody>
</ModalContent>