mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import {type SvgProps} from 'react-native-svg'
2
3import {PressableWithHover} from '#/view/com/util/PressableWithHover'
4import {atoms as a, useTheme, web} from '#/alf'
5
6export function ControlButton({
7 active,
8 activeLabel,
9 inactiveLabel,
10 activeIcon: ActiveIcon,
11 inactiveIcon: InactiveIcon,
12 onPress,
13}: {
14 active: boolean
15 activeLabel: string
16 inactiveLabel: string
17 activeIcon: React.ComponentType<Pick<SvgProps, 'fill' | 'width'>>
18 inactiveIcon: React.ComponentType<Pick<SvgProps, 'fill' | 'width'>>
19 onPress: () => void
20}) {
21 const t = useTheme()
22 return (
23 <PressableWithHover
24 accessibilityRole="button"
25 accessibilityLabel={active ? activeLabel : inactiveLabel}
26 accessibilityHint=""
27 onPress={onPress}
28 style={[
29 a.p_xs,
30 a.rounded_full,
31 web({transition: 'background-color 0.1s'}),
32 ]}
33 hoverStyle={{backgroundColor: 'rgba(255, 255, 255, 0.2)'}}>
34 {active ? (
35 <ActiveIcon fill={t.palette.white} width={20} aria-hidden />
36 ) : (
37 <InactiveIcon fill={t.palette.white} width={20} aria-hidden />
38 )}
39 </PressableWithHover>
40 )
41}