2
0

✏️ (lp) Fix incorrect additional limits price

This commit is contained in:
Baptiste Arnaud
2022-11-03 19:39:42 +01:00
parent 570a780db1
commit c62e20f81a
26 changed files with 434 additions and 481 deletions

View File

@ -9,8 +9,8 @@ import {
Stack,
Text,
} from '@chakra-ui/react'
import { NextChakraLink } from './nextChakraAdapters/NextChakraLink'
import { Logo } from 'assets/icons/Logo'
import { TextLink } from './TextLink'
const facebookGroupUrl = 'https://www.facebook.com/groups/typebot'
const typebotLinkedInUrl = 'https://www.linkedin.com/company/typebot'
@ -35,64 +35,40 @@ export const Footer = () => {
</HStack>
<Text>
Made with by{' '}
<NextChakraLink href={baptisteTwitterUrl} color="gray.400">
@baptisteArno
</NextChakraLink>
<TextLink href={baptisteTwitterUrl}>@baptisteArno</TextLink>
</Text>
</Stack>
<Stack align={'flex-start'}>
<ListHeader>Product</ListHeader>
<NextChakraLink
href={documentationLink}
isExternal
color="gray.400"
>
<TextLink href={documentationLink} isExternal>
Documentation
</NextChakraLink>
<NextChakraLink href={roadmapLink} isExternal color="gray.400">
</TextLink>
<TextLink href={roadmapLink} isExternal>
Roadmap
</NextChakraLink>
<NextChakraLink href={'/pricing'} color="gray.400">
Pricing
</NextChakraLink>
</TextLink>
<TextLink href={'/pricing'}>Pricing</TextLink>
</Stack>
<Stack align={'flex-start'}>
<ListHeader>Community</ListHeader>
<NextChakraLink href={githubRepoLink} isExternal color="gray.400">
<TextLink href={githubRepoLink} isExternal>
GitHub repository
</NextChakraLink>
<NextChakraLink href={facebookGroupUrl} isExternal color="gray.400">
</TextLink>
<TextLink href={facebookGroupUrl} isExternal>
Facebook Group
</NextChakraLink>
<NextChakraLink
href={typebotTwitterUrl}
isExternal
color="gray.400"
>
</TextLink>
<TextLink href={typebotTwitterUrl} isExternal>
Twitter
</NextChakraLink>
<NextChakraLink
href={typebotLinkedInUrl}
isExternal
color="gray.400"
>
</TextLink>
<TextLink href={typebotLinkedInUrl} isExternal>
LinkedIn
</NextChakraLink>
</TextLink>
</Stack>
<Stack align={'flex-start'}>
<ListHeader>Company</ListHeader>
<NextChakraLink href="/about" color="gray.400">
About
</NextChakraLink>
<NextChakraLink href="mailto:baptiste@typebot.io" color="gray.400">
Contact
</NextChakraLink>
<NextChakraLink href={'/terms-of-service'} color="gray.400">
Terms of Service
</NextChakraLink>
<NextChakraLink href={'/privacy-policies'} color="gray.400">
Privacy Policy
</NextChakraLink>
<TextLink href="/about">About</TextLink>
<TextLink href="mailto:baptiste@typebot.io">Contact</TextLink>
<TextLink href={'/terms-of-service'}>Terms of Service</TextLink>
<TextLink href={'/privacy-policies'}>Privacy Policy</TextLink>
</Stack>
</SimpleGrid>
</Container>

View File

@ -7,13 +7,13 @@ import {
useColorModeValue as mode,
useDisclosure,
Box,
Link,
} 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'
@ -40,7 +40,7 @@ export const Header = () => {
className="nav-content__mobile"
color={mode('white', 'white')}
>
<HStack as={NextChakraLink} href="/" rel="home" ml="2">
<HStack as={Link} href="/" rel="home" ml="2">
<Logo boxSize="35px" />
<Heading as="p" fontSize="lg">
Typebot
@ -77,7 +77,7 @@ export const Header = () => {
<ResourcesMenu isOpen={isOpen} />
</Flex>
<Button
as={NextChakraLink}
as={Link}
href="/pricing"
variant="ghost"
colorScheme="gray"
@ -86,7 +86,7 @@ export const Header = () => {
Pricing
</Button>
<Button
as={NextChakraLink}
as={Link}
href="https://app.typebot.io/signin"
colorScheme="blue"
variant="outline"
@ -95,7 +95,7 @@ export const Header = () => {
Sign in
</Button>
<Button
as={NextChakraLink}
as={Link}
href="https://app.typebot.io/register"
colorScheme="orange"
fontWeight={700}

View File

@ -1,5 +1,5 @@
import { Collapse, Stack, Button, Text } from '@chakra-ui/react'
import { NextChakraLink } from '../nextChakraAdapters/NextChakraLink'
import Link from 'next/link'
import { links } from './_data'
type Props = { isOpen: boolean }
@ -15,7 +15,7 @@ export const MobileMenu = ({ isOpen }: Props) => (
spacing={4}
>
<Button
as={NextChakraLink}
as={Link}
href="https://app.typebot.io/signin"
colorScheme="blue"
variant="outline"
@ -24,7 +24,7 @@ export const MobileMenu = ({ isOpen }: Props) => (
Sign in
</Button>
<Button
as={NextChakraLink}
as={Link}
href="https://app.typebot.io/register"
colorScheme="orange"
fontWeight={700}
@ -32,7 +32,7 @@ export const MobileMenu = ({ isOpen }: Props) => (
Create a typebot
</Button>
<Button
as={NextChakraLink}
as={Link}
href="/pricing"
variant="outline"
colorScheme="gray"
@ -43,7 +43,7 @@ export const MobileMenu = ({ isOpen }: Props) => (
<Text fontWeight="700">Resources:</Text>
{links[0].children?.map((link, idx) => (
<Button
as={NextChakraLink}
as={Link}
href={link.href}
key={idx}
variant="outline"

View File

@ -8,8 +8,8 @@ import {
useColorModeValue as mode,
} from '@chakra-ui/react'
import { ChevronRightIcon } from 'assets/icons/ChevronRightIcon'
import Link from 'next/link'
import * as React from 'react'
import { NextChakraLink } from '../nextChakraAdapters/NextChakraLink'
import { links } from './_data'
type Props = { isOpen: boolean }
@ -29,7 +29,8 @@ export const ResourcesMenu = ({ isOpen }: Props) => (
<Box maxW="7xl" mx="auto" px="8">
<SimpleGrid spacing="10" columns={2}>
{links[0].children?.map((item, idx) => (
<NextChakraLink
<Box
as={Link}
key={idx}
className="group"
href={item.href}
@ -41,9 +42,11 @@ export const ResourcesMenu = ({ isOpen }: Props) => (
rounded="lg"
_hover={{ bg: mode('gray.50', 'gray.600') }}
_focus={{ shadow: 'outline' }}
isExternal={
target={
item.href.startsWith('https') &&
!item.href.includes('app.typebot.io')
? '_blank'
: undefined
}
>
<Center
@ -80,7 +83,7 @@ export const ResourcesMenu = ({ isOpen }: Props) => (
{item.description}
</Text>
</Box>
</NextChakraLink>
</Box>
))}
</SimpleGrid>
</Box>

View File

@ -0,0 +1,37 @@
import Link, { LinkProps } from 'next/link'
import React from 'react'
import { Box, chakra, HStack, Stack, TextProps } from '@chakra-ui/react'
import { ExternalLinkIcon } from 'assets/icons/ExternalLinkIcon'
type TextLinkProps = LinkProps & TextProps & { isExternal?: boolean }
export const TextLink = ({
children,
href,
shallow,
replace,
scroll,
prefetch,
isExternal,
...textProps
}: TextLinkProps) => (
<Link
href={href}
shallow={shallow}
replace={replace}
scroll={scroll}
prefetch={prefetch}
target={isExternal ? '_blank' : undefined}
>
<chakra.span textDecor="underline" display="inline-block" {...textProps}>
{isExternal ? (
<HStack as="span" spacing={1}>
<chakra.span>{children}</chakra.span>
<ExternalLinkIcon />
</HStack>
) : (
children
)}
</chakra.span>
</Link>
)

View File

@ -1,50 +0,0 @@
import { PropsWithChildren } from 'react'
import NextLink from 'next/link'
import { LinkProps as NextLinkProps } from 'next/dist/client/link'
import {
Link as ChakraLink,
LinkProps as ChakraLinkProps,
} from '@chakra-ui/react'
import React from 'react'
export type NextChakraLinkProps = PropsWithChildren<
NextLinkProps & Omit<ChakraLinkProps, 'as'>
>
// Has to be a new component because both chakra and next share the `as` keyword
// eslint-disable-next-line react/display-name
export const NextChakraLink = React.forwardRef(
(
{
href,
as,
replace,
scroll,
shallow,
prefetch,
children,
locale,
...chakraProps
}: NextChakraLinkProps,
ref
) => {
return (
<NextLink
passHref={true}
href={href}
as={as}
replace={replace}
scroll={scroll}
shallow={shallow}
prefetch={prefetch}
locale={locale}
>
{/*eslint-disable-next-line @typescript-eslint/ban-ts-comment*/}
{/*@ts-ignore*/}
<ChakraLink ref={ref} {...chakraProps}>
{children}
</ChakraLink>
</NextLink>
)
}
)