143 lines
3.4 KiB
TypeScript
Executable File
143 lines
3.4 KiB
TypeScript
Executable File
import {
|
|
Box,
|
|
Button,
|
|
Flex,
|
|
FlexProps,
|
|
HStack,
|
|
useDisclosure,
|
|
useColorModeValue as mode,
|
|
Heading,
|
|
} from '@chakra-ui/react'
|
|
import * as React from 'react'
|
|
import { Logo } from 'assets/icons/Logo'
|
|
import { NextChakraLink } from '../nextChakraAdapters/NextChakraLink'
|
|
import { NavLink } from './NavLink'
|
|
import { NavMenu } from './NavMenu'
|
|
import { Submenu } from './Submenu'
|
|
import { ToggleButton } from './ToggleButton'
|
|
import { Link } from './_data'
|
|
|
|
const MobileNavContext = ({
|
|
links,
|
|
...props
|
|
}: { links: Link[] } & FlexProps) => {
|
|
const { isOpen, onToggle } = useDisclosure()
|
|
return (
|
|
<>
|
|
<Flex
|
|
align="center"
|
|
justify="space-between"
|
|
className="nav-content__mobile"
|
|
color={mode('white', 'white')}
|
|
{...props}
|
|
>
|
|
<HStack as={NextChakraLink} href="/" rel="home" ml="2">
|
|
<Logo boxSize="35px" />
|
|
<Heading as="p" fontSize="lg">
|
|
Typebot
|
|
</Heading>
|
|
</HStack>
|
|
<Box>
|
|
<ToggleButton isOpen={isOpen} onClick={onToggle} />
|
|
</Box>
|
|
</Flex>
|
|
<NavMenu animate={isOpen ? 'open' : 'closed'}>
|
|
{links.map((link, idx) =>
|
|
link.children ? (
|
|
<Submenu.Mobile key={idx} link={link} />
|
|
) : (
|
|
<NavLink.Mobile key={idx} href={link.href ?? '#'}>
|
|
{link.label}
|
|
</NavLink.Mobile>
|
|
)
|
|
)}
|
|
<Button
|
|
as={NextChakraLink}
|
|
href="https://app.typebot.io/signin"
|
|
colorScheme="blue"
|
|
variant="outline"
|
|
w="full"
|
|
size="lg"
|
|
mt="5"
|
|
>
|
|
Sign in
|
|
</Button>
|
|
<Button
|
|
as={NextChakraLink}
|
|
href="https://app.typebot.io/signup"
|
|
colorScheme="blue"
|
|
w="full"
|
|
size="lg"
|
|
mt="5"
|
|
>
|
|
Create a typebot for free
|
|
</Button>
|
|
</NavMenu>
|
|
</>
|
|
)
|
|
}
|
|
|
|
const DesktopNavContent = ({
|
|
links,
|
|
...props
|
|
}: { links: Link[] } & FlexProps) => {
|
|
return (
|
|
<Flex
|
|
className="nav-content__desktop"
|
|
align="center"
|
|
justify="space-between"
|
|
{...props}
|
|
color={mode('bg.gray800', 'white')}
|
|
>
|
|
<HStack as={NextChakraLink} href="/" rel="home">
|
|
<Logo boxSize="35px" isDark={mode(false, true)} />
|
|
<Heading as="p" fontSize="lg">
|
|
Typebot
|
|
</Heading>
|
|
</HStack>
|
|
<HStack
|
|
as="ul"
|
|
id="nav__primary-menu"
|
|
aria-label="Main Menu"
|
|
listStyleType="none"
|
|
>
|
|
{links.map((link, idx) => (
|
|
<Box as="li" key={idx} id={`nav__menuitem-${idx}`}>
|
|
{link.children ? (
|
|
<Submenu.Desktop link={link} />
|
|
) : (
|
|
<NavLink.Desktop href={link.href ?? '#'}>
|
|
{link.label}
|
|
</NavLink.Desktop>
|
|
)}
|
|
</Box>
|
|
))}
|
|
</HStack>
|
|
<HStack spacing="8" minW="240px" justify="space-between">
|
|
<Box
|
|
as={NextChakraLink}
|
|
href="https://app.typebot.io/signin"
|
|
colorScheme="blue"
|
|
variant="ghost"
|
|
fontWeight="bold"
|
|
>
|
|
Sign in
|
|
</Box>
|
|
<Button
|
|
as={NextChakraLink}
|
|
href="https://app.typebot.io/signup"
|
|
colorScheme="blue"
|
|
fontWeight="bold"
|
|
>
|
|
Create a typebot
|
|
</Button>
|
|
</HStack>
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
export const NavContent = {
|
|
Mobile: MobileNavContext,
|
|
Desktop: DesktopNavContent,
|
|
}
|