49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
|
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<ChakraLinkProps, 'as'> & {
|
||
|
|
active?: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
const DesktopNavLink = (props: NavLinkProps) => {
|
||
|
|
const { href, children } = props
|
||
|
|
return (
|
||
|
|
<Button
|
||
|
|
as={NextChakraLink}
|
||
|
|
href={href}
|
||
|
|
isExternal={href.startsWith('https') && !href.includes('app.typebot.io')}
|
||
|
|
variant="ghost"
|
||
|
|
colorScheme="gray"
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</Button>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
DesktopNavLink.displayName = 'DesktopNavLink'
|
||
|
|
|
||
|
|
export const MobileNavLink = (props: NavLinkProps) => {
|
||
|
|
const { href, children } = props
|
||
|
|
return (
|
||
|
|
<Button
|
||
|
|
as={NextChakraLink}
|
||
|
|
href={href ?? '#'}
|
||
|
|
isExternal={href.startsWith('https') && !href.includes('app.typebot.io')}
|
||
|
|
variant="ghost"
|
||
|
|
colorScheme="gray"
|
||
|
|
w="full"
|
||
|
|
h="3rem"
|
||
|
|
justifyContent="flex-start"
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</Button>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export const NavLink = {
|
||
|
|
Mobile: MobileNavLink,
|
||
|
|
Desktop: DesktopNavLink,
|
||
|
|
}
|