From 1fdf7e734b41df8befca1589750277c7eb119962 Mon Sep 17 00:00:00 2001 From: Baptiste Arnaud Date: Tue, 5 Apr 2022 09:51:43 +0200 Subject: [PATCH] =?UTF-8?q?refactor(lp):=20=E2=99=BB=EF=B8=8F=20Simplify?= =?UTF-8?q?=20header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/builder/assets/icons.tsx | 9 ++ .../templates/CreateNewTypebotButtons.tsx | 119 +++++++++++++++ ...em.tsx => ImportTypebotFromFileButton.tsx} | 24 ++- .../components/templates/PreviewModal.tsx | 2 +- .../components/templates/TemplateButton.tsx | 2 +- .../components/templates/TemplatesModal.tsx | 62 ++++++++ apps/builder/components/templates/data.ts | 6 + .../layouts/dashboard/TemplatesContent.tsx | 110 -------------- apps/builder/pages/typebots/create.tsx | 10 +- apps/landing-page/assets/icons/CloseIcon.tsx | 18 ++- .../assets/icons/HamburgerIcon.tsx | 24 +++ apps/landing-page/assets/icons/index.tsx | 1 + .../components/Homepage/Hero/Hero.tsx | 4 +- .../components/common/Header/Header.tsx | 109 +++++++++++++ .../components/common/Header/MobileMenu.tsx | 59 ++++++++ .../common/Header/ResourcesMenu.tsx | 89 +++++++++++ .../common/{Navbar => Header}/_data.tsx | 11 -- .../components/common/Navbar/MotionBox.tsx | 5 - .../components/common/Navbar/NavContent.tsx | 143 ------------------ .../components/common/Navbar/NavLink.tsx | 48 ------ .../components/common/Navbar/NavMenu.tsx | 43 ------ .../components/common/Navbar/Navbar.tsx | 30 ---- .../components/common/Navbar/Submenu.tsx | 95 ------------ .../components/common/Navbar/SubmenuItem.tsx | 75 --------- .../components/common/Navbar/ToggleButton.tsx | 65 -------- .../components/common/Navbar/useNavMenu.ts | 127 ---------------- apps/landing-page/pages/pricing.tsx | 4 +- apps/landing-page/pages/privacy-policies.tsx | 4 +- apps/landing-page/pages/terms-of-service.tsx | 4 +- 29 files changed, 512 insertions(+), 790 deletions(-) create mode 100644 apps/builder/components/templates/CreateNewTypebotButtons.tsx rename apps/builder/components/templates/{ImportFileMenuItem.tsx => ImportTypebotFromFileButton.tsx} (61%) create mode 100644 apps/builder/components/templates/TemplatesModal.tsx create mode 100644 apps/builder/components/templates/data.ts delete mode 100644 apps/builder/layouts/dashboard/TemplatesContent.tsx create mode 100644 apps/landing-page/assets/icons/HamburgerIcon.tsx create mode 100755 apps/landing-page/components/common/Header/Header.tsx create mode 100644 apps/landing-page/components/common/Header/MobileMenu.tsx create mode 100755 apps/landing-page/components/common/Header/ResourcesMenu.tsx rename apps/landing-page/components/common/{Navbar => Header}/_data.tsx (88%) delete mode 100755 apps/landing-page/components/common/Navbar/MotionBox.tsx delete mode 100755 apps/landing-page/components/common/Navbar/NavContent.tsx delete mode 100755 apps/landing-page/components/common/Navbar/NavLink.tsx delete mode 100755 apps/landing-page/components/common/Navbar/NavMenu.tsx delete mode 100755 apps/landing-page/components/common/Navbar/Navbar.tsx delete mode 100755 apps/landing-page/components/common/Navbar/Submenu.tsx delete mode 100755 apps/landing-page/components/common/Navbar/SubmenuItem.tsx delete mode 100755 apps/landing-page/components/common/Navbar/ToggleButton.tsx delete mode 100755 apps/landing-page/components/common/Navbar/useNavMenu.ts diff --git a/apps/builder/assets/icons.tsx b/apps/builder/assets/icons.tsx index af083da8a2f..26fb70fefbf 100644 --- a/apps/builder/assets/icons.tsx +++ b/apps/builder/assets/icons.tsx @@ -394,3 +394,12 @@ export const CopyIcon = (props: IconProps) => ( ) + +export const TemplateIcon = (props: IconProps) => ( + + + + + + +) diff --git a/apps/builder/components/templates/CreateNewTypebotButtons.tsx b/apps/builder/components/templates/CreateNewTypebotButtons.tsx new file mode 100644 index 00000000000..27fcae36e8a --- /dev/null +++ b/apps/builder/components/templates/CreateNewTypebotButtons.tsx @@ -0,0 +1,119 @@ +import { + VStack, + Heading, + Stack, + Tooltip, + Button, + useDisclosure, + useToast, +} from '@chakra-ui/react' +import { ToolIcon, TemplateIcon, DownloadIcon } from 'assets/icons' +import { useUser } from 'contexts/UserContext' +import { Typebot } from 'models' +import { useRouter } from 'next/router' +import React, { useEffect, useState } from 'react' +import { importTypebot, createTypebot } from 'services/typebots' +import { ImportTypebotFromFileButton } from './ImportTypebotFromFileButton' +import { TemplatesModal } from './TemplatesModal' + +export const CreateNewTypebotButtons = () => { + const { user } = useUser() + const router = useRouter() + const { isOpen, onOpen, onClose } = useDisclosure() + const [isFromScratchTooltipOpened, setIsFromScratchTooltipOpened] = + useState(false) + + const [isLoading, setIsLoading] = useState(false) + + const toast = useToast({ + position: 'top-right', + status: 'error', + title: 'An error occured', + }) + + useEffect(() => { + if (!router.isReady) return + const isFirstBot = router.query.isFirstBot as string | undefined + if (isFirstBot) setIsFromScratchTooltipOpened(true) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [router.isReady]) + + const handleCreateSubmit = async (typebot?: Typebot) => { + if (!user) return + setIsLoading(true) + const folderId = router.query.folderId?.toString() ?? null + const { error, data } = typebot + ? await importTypebot( + { + ...typebot, + ownerId: user.id, + folderId, + theme: { + ...typebot.theme, + chat: { + ...typebot.theme.chat, + hostAvatar: { isEnabled: true, url: user.image ?? undefined }, + }, + }, + }, + user + ) + : await createTypebot({ + folderId, + }) + if (error) toast({ description: error.message }) + if (data) router.push(`/typebots/${data.id}/edit`) + setIsLoading(false) + } + + return ( + + Create a new typebot + + + + + + } + isLoading={isLoading} + onNewTypebot={handleCreateSubmit} + > + Import a file + + + + + ) +} diff --git a/apps/builder/components/templates/ImportFileMenuItem.tsx b/apps/builder/components/templates/ImportTypebotFromFileButton.tsx similarity index 61% rename from apps/builder/components/templates/ImportFileMenuItem.tsx rename to apps/builder/components/templates/ImportTypebotFromFileButton.tsx index 133b147b629..47cbdd61731 100644 --- a/apps/builder/components/templates/ImportFileMenuItem.tsx +++ b/apps/builder/components/templates/ImportTypebotFromFileButton.tsx @@ -1,15 +1,16 @@ -import { chakra, MenuItem, MenuItemProps, useToast } from '@chakra-ui/react' -import { FileIcon } from 'assets/icons' -import { MoreButton } from 'components/dashboard/FolderContent/MoreButton' +import { Button, ButtonProps, chakra, useToast } from '@chakra-ui/react' import { Typebot } from 'models' import React, { ChangeEvent } from 'react' import { readFile } from 'services/utils' type Props = { onNewTypebot: (typebot: Typebot) => void -} & MenuItemProps +} & ButtonProps -export const CreateTypebotMoreButton = ({ onNewTypebot }: Props) => { +export const ImportTypebotFromFileButton = ({ + onNewTypebot, + ...props +}: Props) => { const toast = useToast({ position: 'top-right', status: 'error', @@ -36,16 +37,9 @@ export const CreateTypebotMoreButton = ({ onNewTypebot }: Props) => { onChange={handleInputChange} accept=".json" /> - - } - htmlFor="file-input" - > - Import from file - - + ) } diff --git a/apps/builder/components/templates/PreviewModal.tsx b/apps/builder/components/templates/PreviewModal.tsx index 95b5f7a5d03..db00b452244 100644 --- a/apps/builder/components/templates/PreviewModal.tsx +++ b/apps/builder/components/templates/PreviewModal.tsx @@ -9,10 +9,10 @@ import { Button, } from '@chakra-ui/react' import { TypebotViewer } from 'bot-engine' -import { TemplateProps } from 'layouts/dashboard/TemplatesContent' import { Typebot } from 'models' import React from 'react' import { parseTypebotToPublicTypebot } from 'services/publicTypebot' +import { TemplateProps } from './data' type Props = { template: TemplateProps diff --git a/apps/builder/components/templates/TemplateButton.tsx b/apps/builder/components/templates/TemplateButton.tsx index dcd5e6bcbf7..d5f1f30c4cd 100644 --- a/apps/builder/components/templates/TemplateButton.tsx +++ b/apps/builder/components/templates/TemplateButton.tsx @@ -8,10 +8,10 @@ import { useDisclosure, } from '@chakra-ui/react' import { EyeIcon } from 'assets/icons' -import { TemplateProps } from 'layouts/dashboard/TemplatesContent' import { Typebot } from 'models' import React, { useEffect, useState } from 'react' import { sendRequest } from 'utils' +import { TemplateProps } from './data' import { PreviewModal } from './PreviewModal' type Props = { diff --git a/apps/builder/components/templates/TemplatesModal.tsx b/apps/builder/components/templates/TemplatesModal.tsx new file mode 100644 index 00000000000..bf8fe424972 --- /dev/null +++ b/apps/builder/components/templates/TemplatesModal.tsx @@ -0,0 +1,62 @@ +import { + Button, + Heading, + HStack, + Modal, + ModalBody, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, + Stack, + useToast, +} from '@chakra-ui/react' +import { TypebotViewer } from 'bot-engine' +import { Typebot } from 'models' +import React, { useEffect, useState } from 'react' +import { parseTypebotToPublicTypebot } from 'services/publicTypebot' +import { sendRequest } from 'utils' +import { TemplateProps, templates } from './data' + +type Props = { isOpen: boolean; onClose: () => void } + +export const TemplatesModal = ({ isOpen, onClose }: Props) => { + const [typebot, setTypebot] = useState() + + const toast = useToast({ + position: 'top-right', + status: 'error', + }) + + useEffect(() => { + fetchTemplate(templates[0]) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []) + + const fetchTemplate = async (template: TemplateProps) => { + const { data, error } = await sendRequest(`/templates/${template.fileName}`) + if (error) return toast({ title: error.name, description: error.message }) + setTypebot(data as Typebot) + } + + return ( + + + + + Lead generation + + + {typebot && ( + + )} + + + + + + + + + ) +} diff --git a/apps/builder/components/templates/data.ts b/apps/builder/components/templates/data.ts new file mode 100644 index 00000000000..b4ba99f092f --- /dev/null +++ b/apps/builder/components/templates/data.ts @@ -0,0 +1,6 @@ +export type TemplateProps = { name: string; emoji: string; fileName: string } + +export const templates: TemplateProps[] = [ + { name: 'Lead Generation', emoji: '🤝', fileName: 'lead-gen.json' }, + { name: 'Customer Support', emoji: '😍', fileName: 'customer-support.json' }, +] diff --git a/apps/builder/layouts/dashboard/TemplatesContent.tsx b/apps/builder/layouts/dashboard/TemplatesContent.tsx deleted file mode 100644 index 77fd9c03c04..00000000000 --- a/apps/builder/layouts/dashboard/TemplatesContent.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import { - Button, - Divider, - Flex, - SimpleGrid, - Text, - Stack, - useToast, - Tooltip, -} from '@chakra-ui/react' -import { CreateTypebotMoreButton } from 'components/templates/ImportFileMenuItem' -import { TemplateButton } from 'components/templates/TemplateButton' -import { useUser } from 'contexts/UserContext' -import { Typebot } from 'models' -import { useRouter } from 'next/router' -import React, { useEffect, useState } from 'react' -import { createTypebot, importTypebot } from 'services/typebots/typebots' - -export type TemplateProps = { name: string; emoji: string; fileName: string } -const templates: TemplateProps[] = [ - { name: 'Lead Generation', emoji: '🤝', fileName: 'lead-gen.json' }, - { name: 'Customer Support', emoji: '😍', fileName: 'customer-support.json' }, -] -export const TemplatesContent = () => { - const { user } = useUser() - const router = useRouter() - const [isFromScratchTooltipOpened, setIsFromScratchTooltipOpened] = - useState(false) - - const [isLoading, setIsLoading] = useState(false) - - const toast = useToast({ - position: 'top-right', - status: 'error', - title: 'An error occured', - }) - - useEffect(() => { - if (!router.isReady) return - const isFirstBot = router.query.isFirstBot as string | undefined - if (isFirstBot) setIsFromScratchTooltipOpened(true) - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [router.isReady]) - - const handleCreateSubmit = async (typebot?: Typebot) => { - if (!user) return - setIsLoading(true) - const folderId = router.query.folderId?.toString() ?? null - const { error, data } = typebot - ? await importTypebot( - { - ...typebot, - ownerId: user.id, - folderId, - theme: { - ...typebot.theme, - chat: { - ...typebot.theme.chat, - hostAvatar: { isEnabled: true, url: user.image ?? undefined }, - }, - }, - }, - user - ) - : await createTypebot({ - folderId, - }) - if (error) toast({ description: error.message }) - if (data) router.push(`/typebots/${data.id}/edit`) - setIsLoading(false) - } - - return ( - - - - - - - - - - - Or start from a template - - {templates.map((template) => ( - - ))} - - - - ) -} diff --git a/apps/builder/pages/typebots/create.tsx b/apps/builder/pages/typebots/create.tsx index c4996795868..d6de7ec49b2 100644 --- a/apps/builder/pages/typebots/create.tsx +++ b/apps/builder/pages/typebots/create.tsx @@ -1,15 +1,15 @@ import React from 'react' -import { Stack } from '@chakra-ui/react' +import { VStack } from '@chakra-ui/react' import { Seo } from 'components/Seo' import { DashboardHeader } from 'components/dashboard/DashboardHeader' -import { TemplatesContent } from 'layouts/dashboard/TemplatesContent' +import { CreateNewTypebotButtons } from 'components/templates/CreateNewTypebotButtons' const TemplatesPage = () => ( - + - - + + ) export default TemplatesPage diff --git a/apps/landing-page/assets/icons/CloseIcon.tsx b/apps/landing-page/assets/icons/CloseIcon.tsx index 8b11310e75f..69abb1a18ab 100644 --- a/apps/landing-page/assets/icons/CloseIcon.tsx +++ b/apps/landing-page/assets/icons/CloseIcon.tsx @@ -1,13 +1,15 @@ -import React, { SVGProps } from 'react' +import { Icon, IconProps } from '@chakra-ui/react' +import React from 'react' +import { featherIconsBaseProps } from './HamburgerIcon' -export const CloseIcon = (props: SVGProps) => ( - ( + - Close Circle - - + + + ) diff --git a/apps/landing-page/assets/icons/HamburgerIcon.tsx b/apps/landing-page/assets/icons/HamburgerIcon.tsx new file mode 100644 index 00000000000..1d0ecb7575e --- /dev/null +++ b/apps/landing-page/assets/icons/HamburgerIcon.tsx @@ -0,0 +1,24 @@ +import Icon, { IconProps } from '@chakra-ui/icon' +import React from 'react' + +export const featherIconsBaseProps: IconProps = { + fill: 'none', + stroke: 'currentColor', + strokeWidth: '2px', + strokeLinecap: 'round', + strokeLinejoin: 'round', +} + +export const HamburgerIcon = (props: IconProps) => ( + + + + + +) diff --git a/apps/landing-page/assets/icons/index.tsx b/apps/landing-page/assets/icons/index.tsx index 172d9399adb..83582a4bcc3 100644 --- a/apps/landing-page/assets/icons/index.tsx +++ b/apps/landing-page/assets/icons/index.tsx @@ -1 +1,2 @@ export { GitHubIcon } from './GithubLogo' +export * from './HamburgerIcon' diff --git a/apps/landing-page/components/Homepage/Hero/Hero.tsx b/apps/landing-page/components/Homepage/Hero/Hero.tsx index c3859012996..e325dc779bc 100755 --- a/apps/landing-page/components/Homepage/Hero/Hero.tsx +++ b/apps/landing-page/components/Homepage/Hero/Hero.tsx @@ -10,7 +10,7 @@ import { } from '@chakra-ui/react' import { NextChakraLink } from 'components/common/nextChakraAdapters/NextChakraLink' import * as React from 'react' -import { Navbar } from '../../common/Navbar/Navbar' +import { Header } from '../../common/Header/Header' import { BackgroundPolygons } from './BackgroundPolygons' import * as Logos from './Brands' import Image from 'next/image' @@ -19,7 +19,7 @@ import builderScreenshotSrc from 'public/images/homepage/builder.png' export const Hero = () => { return ( - +
diff --git a/apps/landing-page/components/common/Header/Header.tsx b/apps/landing-page/components/common/Header/Header.tsx new file mode 100755 index 00000000000..290ec63cae7 --- /dev/null +++ b/apps/landing-page/components/common/Header/Header.tsx @@ -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 ( + + + + + + + Typebot + + + + + + ) : ( + + ) + } + variant="ghost" + colorScheme="gray" + onClick={onMobileMenuToggle} + /> + + + + + + + + + + + + + + ) +} diff --git a/apps/landing-page/components/common/Header/MobileMenu.tsx b/apps/landing-page/components/common/Header/MobileMenu.tsx new file mode 100644 index 00000000000..e7b7e83b911 --- /dev/null +++ b/apps/landing-page/components/common/Header/MobileMenu.tsx @@ -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) => ( + + + + + + Resources: + {links[0].children?.map((link, idx) => ( + + ))} + + +) diff --git a/apps/landing-page/components/common/Header/ResourcesMenu.tsx b/apps/landing-page/components/common/Header/ResourcesMenu.tsx new file mode 100755 index 00000000000..70500b31604 --- /dev/null +++ b/apps/landing-page/components/common/Header/ResourcesMenu.tsx @@ -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) => ( + + + + + {links[0].children?.map((item, idx) => ( + +
+ {item.icon} +
+ + + + {item.label} + + + + + {item.description} + + + + ))} + + + + +) diff --git a/apps/landing-page/components/common/Navbar/_data.tsx b/apps/landing-page/components/common/Header/_data.tsx similarity index 88% rename from apps/landing-page/components/common/Navbar/_data.tsx rename to apps/landing-page/components/common/Header/_data.tsx index 7033f165792..761c970fe01 100755 --- a/apps/landing-page/components/common/Navbar/_data.tsx +++ b/apps/landing-page/components/common/Header/_data.tsx @@ -4,17 +4,6 @@ import { MapIcon } from 'assets/icons/MapIcon' import { PeopleCircleIcon } from 'assets/icons/PeopleCircleIcon' import * as React from 'react' -export interface Link { - label: string - href?: string - children?: Array<{ - label: string - description?: string - href: string - icon?: React.ReactElement - }> -} - export const links = [ { label: 'Resources', diff --git a/apps/landing-page/components/common/Navbar/MotionBox.tsx b/apps/landing-page/components/common/Navbar/MotionBox.tsx deleted file mode 100755 index 97ed60b18f9..00000000000 --- a/apps/landing-page/components/common/Navbar/MotionBox.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Box, BoxProps } from '@chakra-ui/react' -import { HTMLMotionProps, motion } from 'framer-motion' - -export type MotionBoxProps = BoxProps & HTMLMotionProps<'div'> -export const MotionBox = motion(Box) diff --git a/apps/landing-page/components/common/Navbar/NavContent.tsx b/apps/landing-page/components/common/Navbar/NavContent.tsx deleted file mode 100755 index 1e692a8f136..00000000000 --- a/apps/landing-page/components/common/Navbar/NavContent.tsx +++ /dev/null @@ -1,143 +0,0 @@ -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 ( - <> - - - - - Typebot - - - - - - - - {links.map((link, idx) => - link.children ? ( - - ) : ( - - {link.label} - - ) - )} - - - - - ) -} - -const DesktopNavContent = ({ - links, - ...props -}: { links: Link[] } & FlexProps) => { - return ( - - - - - Typebot - - - - - - {links.map((link, idx) => ( - - {link.children ? ( - - ) : ( - - {link.label} - - )} - - ))} - - - - - - ) -} - -export const NavContent = { - Mobile: MobileNavContext, - Desktop: DesktopNavContent, -} diff --git a/apps/landing-page/components/common/Navbar/NavLink.tsx b/apps/landing-page/components/common/Navbar/NavLink.tsx deleted file mode 100755 index 45cd5a70834..00000000000 --- a/apps/landing-page/components/common/Navbar/NavLink.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { LinkProps as ChakraLinkProps, Button } from '@chakra-ui/react' -import { LinkProps as NextLinkProps } from 'next/link' -import * as React from 'react' -import { NextChakraLink } from '../nextChakraAdapters/NextChakraLink' - -type NavLinkProps = NextLinkProps & - Omit & { - active?: boolean - } - -const DesktopNavLink = (props: NavLinkProps) => { - const { href, children } = props - return ( - - ) -} -DesktopNavLink.displayName = 'DesktopNavLink' - -export const MobileNavLink = (props: NavLinkProps) => { - const { href, children } = props - return ( - - ) -} - -export const NavLink = { - Mobile: MobileNavLink, - Desktop: DesktopNavLink, -} diff --git a/apps/landing-page/components/common/Navbar/NavMenu.tsx b/apps/landing-page/components/common/Navbar/NavMenu.tsx deleted file mode 100755 index 6661a33814d..00000000000 --- a/apps/landing-page/components/common/Navbar/NavMenu.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { Variants } from 'framer-motion' -import * as React from 'react' -import { MotionBox, MotionBoxProps } from './MotionBox' - -export const NavMenu = (props: MotionBoxProps) => ( - -) - -const variants: Variants = { - init: { - opacity: 0, - y: -4, - display: 'none', - transition: { duration: 0 }, - }, - open: { - opacity: 1, - y: 0, - display: 'block', - transition: { duration: 0.15 }, - }, - closed: { - opacity: 0, - y: -4, - transition: { duration: 0.1 }, - transitionEnd: { - display: 'none', - }, - }, -} diff --git a/apps/landing-page/components/common/Navbar/Navbar.tsx b/apps/landing-page/components/common/Navbar/Navbar.tsx deleted file mode 100755 index 8e41a45146b..00000000000 --- a/apps/landing-page/components/common/Navbar/Navbar.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { Box } from '@chakra-ui/react' -import * as React from 'react' -import { NavContent } from './NavContent' -import { links } from './_data' - -export const Navbar = () => { - return ( - - - - - - - - - ) -} diff --git a/apps/landing-page/components/common/Navbar/Submenu.tsx b/apps/landing-page/components/common/Navbar/Submenu.tsx deleted file mode 100755 index 5a1c46ca42a..00000000000 --- a/apps/landing-page/components/common/Navbar/Submenu.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import { useNavMenu } from './useNavMenu' -import { - Box, - Collapse, - SimpleGrid, - useDisclosure, - Button, -} from '@chakra-ui/react' -import * as React from 'react' -import { Link } from './_data' -import { NavLink } from './NavLink' -import { NavMenu } from './NavMenu' -import { SubmenuItem as DesktopMenuItem } from './SubmenuItem' -import { ChevronDownIcon } from '../../../assets/icons/ChevronDownIcon' - -interface SubmenuProps { - link: Link -} - -const DesktopSubmenu = (props: SubmenuProps) => { - const { link } = props - const { isOpen, getMenuProps, getTriggerProps } = useNavMenu() - return ( - <> - {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} - {/* @ts-ignore */} - - - - - {link.children?.map((item, idx) => ( - - {item.description} - - ))} - - - - - ) -} - -const MobileSubMenu = (props: SubmenuProps) => { - const { link } = props - const { isOpen, onToggle } = useDisclosure() - - return ( - - - - - {link.children?.map((item, idx) => ( - - {item.label} - - ))} - - - - ) -} - -export const Submenu = { - Mobile: MobileSubMenu, - Desktop: DesktopSubmenu, -} diff --git a/apps/landing-page/components/common/Navbar/SubmenuItem.tsx b/apps/landing-page/components/common/Navbar/SubmenuItem.tsx deleted file mode 100755 index 99521932ac8..00000000000 --- a/apps/landing-page/components/common/Navbar/SubmenuItem.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { - Box, - Center, - HStack, - Text, - useColorModeValue as mode, - LinkProps as ChakraLinkProps, -} from '@chakra-ui/react' -import { LinkProps } from 'next/link' -import * as React from 'react' -import { ChevronRightIcon } from '../../../assets/icons/ChevronRightIcon' -import { NextChakraLink } from '../nextChakraAdapters/NextChakraLink' - -type SubmenuItemProps = LinkProps & - Omit & { - title: string - icon?: React.ReactElement - children: React.ReactNode - href: string - } - -export const SubmenuItem = (props: SubmenuItemProps) => { - const { title, icon, children, href, ...rest } = props - return ( - -
- {icon} -
- - - - {title} - - - - - {children} - - - - ) -} diff --git a/apps/landing-page/components/common/Navbar/ToggleButton.tsx b/apps/landing-page/components/common/Navbar/ToggleButton.tsx deleted file mode 100755 index d7abea772e6..00000000000 --- a/apps/landing-page/components/common/Navbar/ToggleButton.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { Box, Center, chakra, VisuallyHidden } from '@chakra-ui/react' -import React from 'react' - -const Bar = chakra('span', { - baseStyle: { - display: 'block', - pos: 'absolute', - w: '1.25rem', - h: '0.125rem', - rounded: 'full', - bg: 'currentcolor', - mx: 'auto', - insetStart: '0.125rem', - transition: 'all 0.12s', - }, -}) - -const ToggleIcon = (props: { active: boolean }) => { - const { active } = props - return ( - - - - - ) -} - -interface ToggleButtonProps { - isOpen: boolean - onClick(): void -} - -export const ToggleButton = (props: ToggleButtonProps) => { - const { isOpen, onClick } = props - return ( -
- - Toggle Menu -
- ) -} diff --git a/apps/landing-page/components/common/Navbar/useNavMenu.ts b/apps/landing-page/components/common/Navbar/useNavMenu.ts deleted file mode 100755 index 5ba701e4e13..00000000000 --- a/apps/landing-page/components/common/Navbar/useNavMenu.ts +++ /dev/null @@ -1,127 +0,0 @@ -import { useDisclosure } from '@chakra-ui/react' -import { isFocusable, getOwnerDocument, isRightClick } from '@chakra-ui/utils' -import * as React from 'react' - -const getTarget = (event: React.FocusEvent) => - (event.relatedTarget || document.activeElement) as HTMLElement - -type OmitMotionProps = Omit< - T, - 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag' -> - -export function useNavMenu() { - const { isOpen, onClose, onToggle, onOpen } = useDisclosure() - const menuRef = React.useRef(null) - const triggerRef = React.useRef(null) - const timeoutRef = React.useRef() - - React.useEffect(() => { - return () => { - if (timeoutRef.current) { - window.clearTimeout(timeoutRef.current) - } - } - }, []) - - const focusMenu = () => { - timeoutRef.current = window.setTimeout(() => { - menuRef.current?.focus({ preventScroll: true }) - }, 100) - } - - const getTriggerProps = () => { - const triggerProps: React.ComponentPropsWithRef<'a'> = { - ref: triggerRef, - 'aria-expanded': isOpen, - 'aria-controls': 'menu', - 'aria-haspopup': 'true', - } - - triggerProps.onClick = (event: React.MouseEvent) => { - if (isRightClick(event)) return - onToggle() - if (!isOpen) { - focusMenu() - } - } - - triggerProps.onBlur = (event: React.FocusEvent) => { - const target = getTarget(event) - if (isOpen && !menuRef.current?.contains(target)) { - onClose() - } - } - - triggerProps.onKeyDown = (event: React.KeyboardEvent) => { - if (isOpen && event.key === 'Escape') { - onClose() - triggerRef.current?.focus({ preventScroll: true }) - } - - if (event.key === 'ArrowDown') { - if (!isOpen) onOpen() - focusMenu() - } - } - - return triggerProps - } - - const getMenuProps = () => { - const menuProps: OmitMotionProps> = { - ref: menuRef, - id: 'menu', - tabIndex: -1, - } - - menuProps.onKeyDown = (event: React.KeyboardEvent) => { - if (!isOpen) return - - switch (event.key) { - case 'Escape': { - onClose() - return triggerRef.current?.focus() - } - case 'ArrowDown': { - const doc = getOwnerDocument(menuRef.current) - const next = doc?.activeElement - ?.nextElementSibling as HTMLAnchorElement | null - return next?.focus() - } - case 'ArrowUp': { - const doc = getOwnerDocument(menuRef.current) - const prev = doc?.activeElement - ?.previousElementSibling as HTMLAnchorElement | null - const el = (prev ?? triggerRef.current) as HTMLElement - return el.focus() - } - default: - break - } - } - - menuProps.onBlur = (event: React.FocusEvent) => { - const target = getTarget(event) - const shouldBlur = - isOpen && - !target.isSameNode(triggerRef.current) && - !menuRef.current?.contains(target) - if (shouldBlur) { - onClose() - if (!isFocusable(target)) { - triggerRef.current?.focus({ preventScroll: true }) - } - } - } - - return menuProps - } - - return { - isOpen, - onClose, - getTriggerProps, - getMenuProps, - } -} diff --git a/apps/landing-page/pages/pricing.tsx b/apps/landing-page/pages/pricing.tsx index b5398250d09..92287f2712a 100644 --- a/apps/landing-page/pages/pricing.tsx +++ b/apps/landing-page/pages/pricing.tsx @@ -10,7 +10,7 @@ import { Stack, } from '@chakra-ui/react' import { Footer } from 'components/common/Footer' -import { Navbar } from 'components/common/Navbar/Navbar' +import { Header } from 'components/common/Header/Header' import { NextChakraLink } from 'components/common/nextChakraAdapters/NextChakraLink' import { SocialMetaTags } from 'components/common/SocialMetaTags' import { BackgroundPolygons } from 'components/Homepage/Hero/BackgroundPolygons' @@ -38,7 +38,7 @@ const Pricing = () => { - +
diff --git a/apps/landing-page/pages/privacy-policies.tsx b/apps/landing-page/pages/privacy-policies.tsx index 0132f56d06a..f53440327f0 100644 --- a/apps/landing-page/pages/privacy-policies.tsx +++ b/apps/landing-page/pages/privacy-policies.tsx @@ -1,13 +1,13 @@ import { Heading } from '@chakra-ui/layout' import { Stack } from '@chakra-ui/react' -import { Navbar } from 'components/common/Navbar/Navbar' +import { Header } from 'components/common/Header/Header' import { SocialMetaTags } from 'components/common/SocialMetaTags' import React from 'react' const PrivacyPolicies = () => { return (
- +
Privacy Policy for Typebot diff --git a/apps/landing-page/pages/terms-of-service.tsx b/apps/landing-page/pages/terms-of-service.tsx index c782ef343fb..5b26c54ab81 100644 --- a/apps/landing-page/pages/terms-of-service.tsx +++ b/apps/landing-page/pages/terms-of-service.tsx @@ -1,12 +1,12 @@ import { Stack, Heading } from '@chakra-ui/react' -import { Navbar } from 'components/common/Navbar/Navbar' +import { Header } from 'components/common/Header/Header' import { SocialMetaTags } from 'components/common/SocialMetaTags' const PrivacyPolicies = () => { return (
- +
Website Terms and Conditions of Use