refactor(lp): ♻️ Simplify header
This commit is contained in:
Baptiste Arnaud
109
apps/landing-page/components/common/Header/Header.tsx
Executable file
109
apps/landing-page/components/common/Header/Header.tsx
Executable file
@ -0,0 +1,109 @@
|
||||
import {
|
||||
Button,
|
||||
Flex,
|
||||
Heading,
|
||||
HStack,
|
||||
IconButton,
|
||||
useColorModeValue as mode,
|
||||
useDisclosure,
|
||||
Box,
|
||||
} from '@chakra-ui/react'
|
||||
import { HamburgerIcon } from 'assets/icons'
|
||||
import { ChevronDownIcon } from 'assets/icons/ChevronDownIcon'
|
||||
import { CloseIcon } from 'assets/icons/CloseIcon'
|
||||
import { Logo } from 'assets/icons/Logo'
|
||||
import * as React from 'react'
|
||||
import { NextChakraLink } from '../nextChakraAdapters/NextChakraLink'
|
||||
import { MobileMenu } from './MobileMenu'
|
||||
import { ResourcesMenu } from './ResourcesMenu'
|
||||
|
||||
export const Header = () => {
|
||||
const { isOpen, onToggle } = useDisclosure()
|
||||
const { isOpen: isMobileMenuOpen, onToggle: onMobileMenuToggle } =
|
||||
useDisclosure()
|
||||
|
||||
return (
|
||||
<Flex pos="relative" zIndex={10} w="full">
|
||||
<HStack
|
||||
as="header"
|
||||
aria-label="Main navigation"
|
||||
maxW="7xl"
|
||||
w="full"
|
||||
mx="auto"
|
||||
px={{ base: '6', md: '8' }}
|
||||
py="4"
|
||||
justify="space-between"
|
||||
>
|
||||
<Flex
|
||||
align="center"
|
||||
justify="space-between"
|
||||
className="nav-content__mobile"
|
||||
color={mode('white', 'white')}
|
||||
>
|
||||
<HStack as={NextChakraLink} href="/" rel="home" ml="2">
|
||||
<Logo boxSize="35px" />
|
||||
<Heading as="p" fontSize="lg">
|
||||
Typebot
|
||||
</Heading>
|
||||
</HStack>
|
||||
</Flex>
|
||||
<Box display={['block', 'block', 'none']}>
|
||||
<IconButton
|
||||
aria-label={'Open menu'}
|
||||
icon={
|
||||
isMobileMenuOpen ? (
|
||||
<CloseIcon boxSize="20px" />
|
||||
) : (
|
||||
<HamburgerIcon boxSize="20px" />
|
||||
)
|
||||
}
|
||||
variant="ghost"
|
||||
colorScheme="gray"
|
||||
onClick={onMobileMenuToggle}
|
||||
/>
|
||||
<MobileMenu isOpen={isMobileMenuOpen} />
|
||||
</Box>
|
||||
<HStack as="nav" spacing={4} display={['none', 'none', 'flex']}>
|
||||
<Flex>
|
||||
<Button
|
||||
rightIcon={<ChevronDownIcon />}
|
||||
onClick={onToggle}
|
||||
variant="ghost"
|
||||
colorScheme="gray"
|
||||
fontWeight={700}
|
||||
>
|
||||
Resources
|
||||
</Button>
|
||||
<ResourcesMenu isOpen={isOpen} />
|
||||
</Flex>
|
||||
<Button
|
||||
as={NextChakraLink}
|
||||
href="/pricing"
|
||||
variant="ghost"
|
||||
colorScheme="gray"
|
||||
fontWeight={700}
|
||||
>
|
||||
Pricing
|
||||
</Button>
|
||||
<Button
|
||||
as={NextChakraLink}
|
||||
href="https://app.typebot.io/signin"
|
||||
colorScheme="blue"
|
||||
variant="outline"
|
||||
fontWeight={700}
|
||||
>
|
||||
Sign in
|
||||
</Button>
|
||||
<Button
|
||||
as={NextChakraLink}
|
||||
href="https://app.typebot.io/register"
|
||||
colorScheme="orange"
|
||||
fontWeight={700}
|
||||
>
|
||||
Create a typebot
|
||||
</Button>
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
59
apps/landing-page/components/common/Header/MobileMenu.tsx
Normal file
59
apps/landing-page/components/common/Header/MobileMenu.tsx
Normal file
@ -0,0 +1,59 @@
|
||||
import { Collapse, Stack, Button, Text } from '@chakra-ui/react'
|
||||
import { NextChakraLink } from '../nextChakraAdapters/NextChakraLink'
|
||||
import { links } from './_data'
|
||||
|
||||
type Props = { isOpen: boolean }
|
||||
|
||||
export const MobileMenu = ({ isOpen }: Props) => (
|
||||
<Collapse in={isOpen}>
|
||||
<Stack
|
||||
pos="absolute"
|
||||
insetX={0}
|
||||
bgGradient="linear(to-b, gray.900, gray.800)"
|
||||
px="6"
|
||||
py="10"
|
||||
spacing={4}
|
||||
>
|
||||
<Button
|
||||
as={NextChakraLink}
|
||||
href="https://app.typebot.io/signin"
|
||||
colorScheme="blue"
|
||||
variant="outline"
|
||||
fontWeight={700}
|
||||
>
|
||||
Sign in
|
||||
</Button>
|
||||
<Button
|
||||
as={NextChakraLink}
|
||||
href="https://app.typebot.io/register"
|
||||
colorScheme="orange"
|
||||
fontWeight={700}
|
||||
>
|
||||
Create a typebot
|
||||
</Button>
|
||||
<Button
|
||||
as={NextChakraLink}
|
||||
href="/pricing"
|
||||
variant="outline"
|
||||
colorScheme="gray"
|
||||
fontWeight={700}
|
||||
>
|
||||
Pricing
|
||||
</Button>
|
||||
<Text fontWeight="700">Resources:</Text>
|
||||
{links[0].children?.map((link, idx) => (
|
||||
<Button
|
||||
as={NextChakraLink}
|
||||
href={link.href}
|
||||
key={idx}
|
||||
variant="outline"
|
||||
colorScheme="gray"
|
||||
fontWeight={700}
|
||||
py="6"
|
||||
>
|
||||
{link.label}
|
||||
</Button>
|
||||
))}
|
||||
</Stack>
|
||||
</Collapse>
|
||||
)
|
||||
89
apps/landing-page/components/common/Header/ResourcesMenu.tsx
Executable file
89
apps/landing-page/components/common/Header/ResourcesMenu.tsx
Executable file
@ -0,0 +1,89 @@
|
||||
import {
|
||||
Box,
|
||||
Center,
|
||||
Collapse,
|
||||
HStack,
|
||||
SimpleGrid,
|
||||
Text,
|
||||
useColorModeValue as mode,
|
||||
} from '@chakra-ui/react'
|
||||
import { ChevronRightIcon } from 'assets/icons/ChevronRightIcon'
|
||||
import * as React from 'react'
|
||||
import { NextChakraLink } from '../nextChakraAdapters/NextChakraLink'
|
||||
import { links } from './_data'
|
||||
|
||||
type Props = { isOpen: boolean }
|
||||
|
||||
export const ResourcesMenu = ({ isOpen }: Props) => (
|
||||
<Collapse in={isOpen} animateOpacity unmountOnExit={false}>
|
||||
<Box
|
||||
w="full"
|
||||
shadow="lg"
|
||||
pos="absolute"
|
||||
insetX={0}
|
||||
top="16"
|
||||
py="12"
|
||||
px="4"
|
||||
bgGradient="linear(to-b, gray.900, gray.800)"
|
||||
>
|
||||
<Box maxW="7xl" mx="auto" px="8">
|
||||
<SimpleGrid spacing="10" columns={2}>
|
||||
{links[0].children?.map((item, idx) => (
|
||||
<NextChakraLink
|
||||
key={idx}
|
||||
className="group"
|
||||
href={item.href}
|
||||
m="-3"
|
||||
p="3"
|
||||
display="flex"
|
||||
alignItems="flex-start"
|
||||
transition="all 0.2s"
|
||||
rounded="lg"
|
||||
_hover={{ bg: mode('gray.50', 'gray.600') }}
|
||||
_focus={{ shadow: 'outline' }}
|
||||
isExternal={
|
||||
item.href.startsWith('https') &&
|
||||
!item.href.includes('app.typebot.io')
|
||||
}
|
||||
>
|
||||
<Center
|
||||
aria-hidden
|
||||
as="span"
|
||||
flexShrink={0}
|
||||
w="10"
|
||||
h="10"
|
||||
fontSize="3xl"
|
||||
color={'blue.300'}
|
||||
>
|
||||
{item.icon}
|
||||
</Center>
|
||||
<Box marginStart="3" as="dl">
|
||||
<HStack as="dt">
|
||||
<Text
|
||||
fontWeight="semibold"
|
||||
color={mode('gray.900', 'white')}
|
||||
_groupHover={{ color: mode('blue.600', 'inherit') }}
|
||||
>
|
||||
{item.label}
|
||||
</Text>
|
||||
<Box
|
||||
fontSize="xs"
|
||||
as={ChevronRightIcon}
|
||||
transition="all 0.2s"
|
||||
_groupHover={{
|
||||
color: mode('blue.600', 'inherit'),
|
||||
transform: 'translateX(2px)',
|
||||
}}
|
||||
/>
|
||||
</HStack>
|
||||
<Text as="dd" color={mode('gray.500', 'gray.400')}>
|
||||
{item.description}
|
||||
</Text>
|
||||
</Box>
|
||||
</NextChakraLink>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
</Box>
|
||||
</Collapse>
|
||||
)
|
||||
41
apps/landing-page/components/common/Header/_data.tsx
Executable file
41
apps/landing-page/components/common/Header/_data.tsx
Executable file
@ -0,0 +1,41 @@
|
||||
import { GitHubIcon } from 'assets/icons'
|
||||
import { DocIcon } from 'assets/icons/DocIcon'
|
||||
import { MapIcon } from 'assets/icons/MapIcon'
|
||||
import { PeopleCircleIcon } from 'assets/icons/PeopleCircleIcon'
|
||||
import * as React from 'react'
|
||||
|
||||
export const links = [
|
||||
{
|
||||
label: 'Resources',
|
||||
children: [
|
||||
{
|
||||
label: 'GitHub repository',
|
||||
description: 'Check out the entire source code of the project',
|
||||
href: 'https://github.com/baptisteArno/typebot.io',
|
||||
icon: <GitHubIcon fill="blue.300" />,
|
||||
},
|
||||
{
|
||||
label: 'Documentation',
|
||||
description:
|
||||
"Everything you need to know about how to use Typebot's builder",
|
||||
href: 'https://docs.typebot.io',
|
||||
icon: <DocIcon />,
|
||||
},
|
||||
{
|
||||
label: 'Roadmap',
|
||||
description:
|
||||
"Follow the development and make suggestions for which features you'd like to see",
|
||||
href: 'https://feedback.typebot.io/roadmap',
|
||||
icon: <MapIcon />,
|
||||
},
|
||||
{
|
||||
label: 'Community',
|
||||
description:
|
||||
'Join our facebook community and get insights on how to create high performing surveys',
|
||||
href: 'https://www.facebook.com/groups/262165102257585',
|
||||
icon: <PeopleCircleIcon />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{ label: 'Pricing', href: '/pricing' },
|
||||
]
|
||||
Reference in New Issue
Block a user