mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-23 05:06:41 +02:00
d36b321d9d
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)
60 lines
1.3 KiB
TypeScript
60 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { Pressable, StyleSheet, Platform } from 'react-native';
|
|
import { Icon } from './Icon';
|
|
import { useThemeColors } from '~/utils/themeUtils';
|
|
|
|
interface FloatingActionButtonProps {
|
|
icon: string;
|
|
iconLibrary?: 'Ionicons' | 'FontAwesome' | 'MaterialIcons' | 'Feather';
|
|
onPress: () => void;
|
|
size?: number;
|
|
}
|
|
|
|
export const FloatingActionButton: React.FC<FloatingActionButtonProps> = ({
|
|
icon,
|
|
iconLibrary = 'Ionicons',
|
|
onPress,
|
|
size = 56,
|
|
}) => {
|
|
const colors = useThemeColors();
|
|
const iconSize = size === 56 ? 24 : size === 48 ? 20 : 28;
|
|
|
|
return (
|
|
<Pressable
|
|
onPress={onPress}
|
|
style={({ pressed }) => [
|
|
styles.container,
|
|
{
|
|
width: size,
|
|
height: size,
|
|
borderRadius: size / 2,
|
|
backgroundColor: colors.primary,
|
|
opacity: pressed ? 0.8 : 1,
|
|
transform: [{ scale: pressed ? 0.95 : 1 }],
|
|
},
|
|
]}
|
|
>
|
|
<Icon name={icon} size={iconSize} color={colors.primaryForeground} library={iconLibrary} />
|
|
</Pressable>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
shadowColor: '#000',
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 4,
|
|
},
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 8,
|
|
elevation: 8,
|
|
...Platform.select({
|
|
web: {
|
|
cursor: 'pointer',
|
|
},
|
|
}),
|
|
},
|
|
});
|