76 lines
1.9 KiB
TypeScript
Executable File
76 lines
1.9 KiB
TypeScript
Executable File
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<ChakraLinkProps, 'as'> & {
|
|
title: string
|
|
icon?: React.ReactElement
|
|
children: React.ReactNode
|
|
href: string
|
|
}
|
|
|
|
export const SubmenuItem = (props: SubmenuItemProps) => {
|
|
const { title, icon, children, href, ...rest } = props
|
|
return (
|
|
<NextChakraLink
|
|
className="group"
|
|
href={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={href.startsWith('https') && !href.includes('app.typebot.io')}
|
|
{...rest}
|
|
>
|
|
<Center
|
|
aria-hidden
|
|
as="span"
|
|
flexShrink={0}
|
|
w="10"
|
|
h="10"
|
|
fontSize="3xl"
|
|
color={mode('blue.600', 'blue.400')}
|
|
>
|
|
{icon}
|
|
</Center>
|
|
<Box marginStart="3" as="dl">
|
|
<HStack as="dt">
|
|
<Text
|
|
fontWeight="semibold"
|
|
color={mode('gray.900', 'white')}
|
|
_groupHover={{ color: mode('blue.600', 'inherit') }}
|
|
>
|
|
{title}
|
|
</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')}>
|
|
{children}
|
|
</Text>
|
|
</Box>
|
|
</NextChakraLink>
|
|
)
|
|
}
|