mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1/**
2 * Copyright (c) JOB TODAY S.A. and its affiliates.
3 *
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
6 *
7 */
8import React from 'react'
9import {
10 SafeAreaView,
11 TouchableOpacity,
12 StyleSheet,
13 ViewStyle,
14} from 'react-native'
15import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
16import {msg} from '@lingui/macro'
17import {useLingui} from '@lingui/react'
18
19import {createHitslop} from '#/lib/constants'
20
21type Props = {
22 onRequestClose: () => void
23}
24
25const HIT_SLOP = createHitslop(16)
26
27const ImageDefaultHeader = ({onRequestClose}: Props) => {
28 const {_} = useLingui()
29 return (
30 <SafeAreaView style={styles.root}>
31 <TouchableOpacity
32 style={[styles.closeButton, styles.blurredBackground]}
33 onPress={onRequestClose}
34 hitSlop={HIT_SLOP}
35 accessibilityRole="button"
36 accessibilityLabel={_(msg`Close image`)}
37 accessibilityHint={_(msg`Closes viewer for header image`)}
38 onAccessibilityEscape={onRequestClose}>
39 <FontAwesomeIcon icon="close" color={'#fff'} size={22} />
40 </TouchableOpacity>
41 </SafeAreaView>
42 )
43}
44
45const styles = StyleSheet.create({
46 root: {
47 alignItems: 'flex-end',
48 pointerEvents: 'box-none',
49 },
50 closeButton: {
51 marginRight: 10,
52 marginTop: 10,
53 width: 44,
54 height: 44,
55 alignItems: 'center',
56 justifyContent: 'center',
57 borderRadius: 22,
58 backgroundColor: '#00000077',
59 },
60 blurredBackground: {
61 backdropFilter: 'blur(10px)',
62 WebkitBackdropFilter: 'blur(10px)',
63 } as ViewStyle,
64})
65
66export default ImageDefaultHeader