import {Trans, useLingui} from '@lingui/react/macro' import {HITSLOP_20} from '#/lib/constants' import {getShapeStyle} from '#/lib/shapes' import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons' import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge' import {atoms as a, useTheme} from '#/alf' import {Pressable} from '#/components/Pressable' import * as Prompt from '#/components/Prompt' import {Text} from '#/components/Typography' const positionStyles = { 'top-left': { top: a.p_xs.padding, left: a.p_xs.padding, }, 'top-right': { top: a.p_xs.padding, right: a.p_xs.padding, }, 'bottom-left': { bottom: a.p_xs.padding, left: a.p_xs.padding, }, 'bottom-right': { bottom: a.p_xs.padding, right: a.p_xs.padding, }, } export function AltBadgeWithDialog({ text, position, }: { text: string position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' }) { const t = useTheme() const cornerShape = useEnableSquareButtons() const {t: l} = useLingui() const large = useLargeAltBadgeEnabled() const control = Prompt.usePromptControl() const pos = position ? [a.absolute, positionStyles[position]] : {} return ( <> [ a.justify_center, getShapeStyle(cornerShape, a.rounded_sm, a.rounded_sm), a.p_xs, a.z_10, t.atoms.bg_contrast_25, large && { padding: 6, }, { opacity: 0.8, }, pos, hovered || pressed ? [ { opacity: 1, }, ] : [], ]}> ALT Alt Text {text} ) }