Something went wrong. Try again.
Bluesky app fork with some witchin' additions 💫
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243import {useState} from 'react'import {useLingui} from '@lingui/react/macro'
import {Button, ButtonIcon} from '#/components/Button'import {CircleQuestion_Stroke2_Corner2_Rounded as CircleQuestionIcon} from '#/components/icons/CircleQuestion'import * as Tooltip from '#/components/Tooltip'
export function TextSyntaxHelp() { const {t: l} = useLingui() const [visible, setVisible] = useState(false) const label = l`Text formatting help` const slash = String.fromCharCode(92) const help = [ l`[label](url) makes a masked link`, l`${slash}... keeps facets like links, hashtags, and mentions plain`, l`<...> contains a facet`, ].join('\n')
return ( <Tooltip.Outer visible={visible} onVisibleChange={setVisible} position="bottom"> <Tooltip.Target> <Button label={label} accessibilityHint={l`Shows link and text formatting options`} testID="composerTextSyntaxHelp" size="small" color="secondary" variant="ghost" shape="round" style={{width: 36, height: 36, backgroundColor: 'transparent'}} hoverStyle={{backgroundColor: 'transparent', opacity: 0.5}} onPress={() => setVisible(value => !value)}> <ButtonIcon icon={CircleQuestionIcon} size="md" /> </Button> </Tooltip.Target> <Tooltip.BubbleText label={label}>{help}</Tooltip.BubbleText> </Tooltip.Outer> )}