mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-20 11:23:38 +02:00
47 lines
1 KiB
TypeScript
47 lines
1 KiB
TypeScript
import React from 'react';
|
|
import { Pressable, ViewStyle, PressableProps } from 'react-native';
|
|
import { Icon } from '../../ui/Icon';
|
|
|
|
export type HeaderButtonProps = {
|
|
/** Icon name */
|
|
icon: string;
|
|
/** Press handler */
|
|
onPress: () => void;
|
|
/** Icon size */
|
|
size?: number;
|
|
/** Icon color */
|
|
iconColor?: string;
|
|
/** Button is disabled */
|
|
disabled?: boolean;
|
|
/** Additional styles */
|
|
style?: ViewStyle;
|
|
/** Hit slop for better touch target */
|
|
hitSlop?: PressableProps['hitSlop'];
|
|
};
|
|
|
|
export function HeaderButton({
|
|
icon,
|
|
onPress,
|
|
size = 24,
|
|
iconColor = '#6B7280',
|
|
disabled = false,
|
|
style,
|
|
hitSlop = { top: 10, bottom: 10, left: 10, right: 10 },
|
|
}: HeaderButtonProps) {
|
|
return (
|
|
<Pressable
|
|
onPress={onPress}
|
|
disabled={disabled}
|
|
hitSlop={hitSlop}
|
|
style={({ pressed }) => [
|
|
{
|
|
padding: 8,
|
|
opacity: disabled ? 0.4 : pressed ? 0.7 : 1,
|
|
},
|
|
style,
|
|
]}
|
|
>
|
|
<Icon name={icon} size={size} color={iconColor} />
|
|
</Pressable>
|
|
);
|
|
}
|