kopia lustrzana https://github.com/Tldraw/Tldraw
54 wiersze
1.3 KiB
TypeScript
54 wiersze
1.3 KiB
TypeScript
import * as RadixTooltip from '@radix-ui/react-tooltip'
|
|
import * as React from 'react'
|
|
import { Kbd } from '~components/Kbd'
|
|
import styled from '~styles'
|
|
|
|
/* -------------------------------------------------- */
|
|
/* Tooltip */
|
|
/* -------------------------------------------------- */
|
|
|
|
interface TooltipProps {
|
|
children: React.ReactNode
|
|
label: string
|
|
kbd?: string
|
|
side?: 'bottom' | 'left' | 'right' | 'top'
|
|
}
|
|
|
|
export function Tooltip({
|
|
children,
|
|
label,
|
|
kbd: kbdProp,
|
|
side = 'top',
|
|
}: TooltipProps): JSX.Element {
|
|
return (
|
|
<RadixTooltip.Root>
|
|
<RadixTooltip.Trigger asChild={true}>
|
|
<span>{children}</span>
|
|
</RadixTooltip.Trigger>
|
|
<StyledContent side={side} sideOffset={8}>
|
|
{label}
|
|
{kbdProp ? <Kbd variant="tooltip">{kbdProp}</Kbd> : null}
|
|
<StyledArrow />
|
|
</StyledContent>
|
|
</RadixTooltip.Root>
|
|
)
|
|
}
|
|
|
|
const StyledContent = styled(RadixTooltip.Content, {
|
|
borderRadius: 3,
|
|
padding: '$3 $3 $3 $3',
|
|
fontSize: '$1',
|
|
backgroundColor: '$tooltipBg',
|
|
color: '$tooltipText',
|
|
boxShadow: '$3',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
fontFamily: '$ui',
|
|
userSelect: 'none',
|
|
})
|
|
|
|
const StyledArrow = styled(RadixTooltip.Arrow, {
|
|
fill: '$tooltipBg',
|
|
margin: '0 8px',
|
|
})
|