managarten/apps/picture/packages/mobile-ui/components/navigation/HeaderButton/HeaderButton.tsx
Wuesteon d36b321d9d style: auto-format codebase with Prettier
Applied formatting to 1487+ files using pnpm format:write
  - TypeScript/JavaScript files
  - Svelte components
  - Astro pages
  - JSON configs
  - Markdown docs

  13 files still need manual review (Astro JSX comments)
2025-11-27 18:33:16 +01:00

47 lines
982 B
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>
);
}