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