koi.rip
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {type SvgProps} from 'react-native-svg'
2
3import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
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 const enableSquareButtons = useEnableSquareButtons()
24 return (
25 <PressableWithHover
26 accessibilityRole="button"
27 accessibilityLabel={active ? activeLabel : inactiveLabel}
28 accessibilityHint=""
29 onPress={onPress}
30 style={[
31 a.p_xs,
32 enableSquareButtons ? a.rounded_sm : a.rounded_full,
33 web({transition: 'background-color 0.1s'}),
34 ]}
35 hoverStyle={{backgroundColor: 'rgba(255, 255, 255, 0.2)'}}>
36 {active ? (
37 <ActiveIcon fill={t.palette.white} width={20} aria-hidden />
38 ) : (
39 <InactiveIcon fill={t.palette.white} width={20} aria-hidden />
40 )}
41 </PressableWithHover>
42 )
43}