forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {View} from 'react-native'
2
3import {atoms as a, useTheme, type ViewStyleProp, web as webOnly} from '#/alf'
4import {IS_NATIVE, IS_WEB, IS_WEB_TOUCH_DEVICE} from '#/env'
5
6export function SubtleHover({
7 style,
8 hover,
9 web = true,
10 native = false,
11}: ViewStyleProp & {hover: boolean; web?: boolean; native?: boolean}) {
12 const t = useTheme()
13
14 let opacity: number
15 switch (t.name) {
16 case 'dark':
17 opacity = 0.4
18 break
19 case 'dim':
20 opacity = 0.45
21 break
22 case 'light':
23 opacity = 0.5
24 break
25 }
26
27 const el = (
28 <View
29 style={[
30 a.absolute,
31 a.inset_0,
32 a.pointer_events_none,
33 a.transition_opacity,
34 t.atoms.bg_contrast_50,
35 style,
36 // Force Safari to composite the overlay on its own GPU layer.
37 // This fixes a layout shift that happens due to different subpixel
38 // rounding when the overlay is composited on hover.
39 webOnly({willChange: 'opacity'}),
40 {opacity: hover ? opacity : 0},
41 ]}
42 />
43 )
44
45 if (IS_WEB && web) {
46 return IS_WEB_TOUCH_DEVICE ? null : el
47 } else if (IS_NATIVE && native) {
48 return el
49 }
50
51 return null
52}