Something went wrong. Try again.
Bluesky app fork with some witchin' additions 💫 forked from jollywhoppers.com/witchsky.app
Something went wrong. Try again.
2.1 kB · 76 lines
TSX
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677/** * Copyright (c) JOB TODAY S.A. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * */import {StyleSheet, TouchableOpacity, type ViewStyle} from 'react-native'import {SafeAreaView} from 'react-native-safe-area-context'import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'import {msg} from '@lingui/core/macro'import {useLingui} from '@lingui/react'
import {createHitslop} from '#/lib/constants'import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
type Props = { onRequestClose: () => void}
const HIT_SLOP = createHitslop(16)
const ImageDefaultHeader = ({onRequestClose}: Props) => { const {_} = useLingui() const enableSquareButtons = useEnableSquareButtons() return ( <SafeAreaView style={styles.root}> <TouchableOpacity style={[ enableSquareButtons ? styles.closeButtonSquare : styles.closeButton, styles.blurredBackground, ]} onPress={onRequestClose} hitSlop={HIT_SLOP} accessibilityRole="button" accessibilityLabel={_(msg`Close image`)} accessibilityHint={_(msg`Closes viewer for header image`)} onAccessibilityEscape={onRequestClose}> <FontAwesomeIcon icon="close" color={'#fff'} size={22} /> </TouchableOpacity> </SafeAreaView> )}
const styles = StyleSheet.create({ root: { alignItems: 'flex-end', pointerEvents: 'box-none', }, closeButton: { marginRight: 10, marginTop: 10, width: 44, height: 44, alignItems: 'center', justifyContent: 'center', borderRadius: 22, backgroundColor: '#00000077', }, closeButtonSquare: { marginRight: 10, marginTop: 10, width: 44, height: 44, alignItems: 'center', justifyContent: 'center', borderRadius: 11, backgroundColor: '#00000077', }, blurredBackground: { backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)', } as ViewStyle,})
export default ImageDefaultHeader