blsmedia/bot
2
0
Fork 0
Code Activity

feat(editor): 💄 Improve onboarding

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-04-08 15:49:07 -05:00
parent 6ba646618d
commit b6d40016cd
1 changed files with 75 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,6 @@ import {
Heading, Heading,
List, List,
ListItem, ListItem,
ListIcon,
Text, Text,
Accordion, Accordion,
AccordionButton, AccordionButton,
@ -17,8 +16,9 @@ import {
AccordionItem, AccordionItem,
AccordionPanel, AccordionPanel,
Box, Box,
HStack,
Flex,
} from '@chakra-ui/react' } from '@chakra-ui/react'
import { CheckSquareIcon } from 'assets/icons'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { useEffect } from 'react' import { useEffect } from 'react'
@ -40,24 +40,79 @@ export const GettingStartedModal = () => {
<Stack spacing={4}> <Stack spacing={4}>
<Heading fontSize="xl">Editor basics</Heading> <Heading fontSize="xl">Editor basics</Heading>
<List spacing={4}> <List spacing={4}>
<ListItem> <HStack as={ListItem}>
<ListIcon as={CheckSquareIcon} color="blue.500" mb="0.5" /> <Flex
The left side bar contains blocks that you can drag and drop to bgColor="blue.500"
the board. rounded="full"
</ListItem> boxSize="25px"
<ListItem> justify="center"
<ListIcon as={CheckSquareIcon} color="blue.500" mb="0.5" /> align="center"
You can group blocks together by dropping them below or above color="white"
each other fontWeight="bold"
</ListItem> flexShrink={0}
<ListItem> fontSize="13px"
<ListIcon as={CheckSquareIcon} color="blue.500" mb="0.5" /> >
Connect the groups together 1
</ListItem> </Flex>
<ListItem> <Text>
<ListIcon as={CheckSquareIcon} color="blue.500" mb="0.5" /> The left side bar contains blocks that you can drag and drop
Preview your bot by clicking the preview button on the top right to the board.
</ListItem> </Text>
</HStack>
<HStack as={ListItem}>
<Flex
bgColor="blue.500"
rounded="full"
boxSize="25px"
fontSize="13px"
justify="center"
align="center"
color="white"
fontWeight="bold"
flexShrink={0}
>
2
</Flex>
<Text>
You can group blocks together by dropping them below or above
each other
</Text>
</HStack>
<HStack as={ListItem}>
<Flex
bgColor="blue.500"
rounded="full"
boxSize="25px"
justify="center"
align="center"
color="white"
fontWeight="bold"
flexShrink={0}
fontSize="13px"
>
3
</Flex>
<Text>Connect the groups together</Text>
</HStack>
<HStack as={ListItem}>
<Flex
bgColor="blue.500"
rounded="full"
boxSize="25px"
justify="center"
align="center"
color="white"
fontWeight="bold"
flexShrink={0}
fontSize="13px"
>
4
</Flex>
<Text>
Preview your bot by clicking the preview button on the top
right
</Text>
</HStack>
</List> </List>
</Stack> </Stack>