56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { Button } from '@tamagui/button';
|
|
import { Plus } from 'lucide-react';
|
|
import { useAppearance } from '@/hooks/use-appearance';
|
|
|
|
type FloatingActionButtonProps = {
|
|
onPress: () => void;
|
|
onLongPress?: () => void;
|
|
};
|
|
|
|
export default function FloatingActionButton({ onPress, onLongPress }: FloatingActionButtonProps) {
|
|
const longPressTriggered = React.useRef(false);
|
|
const { resolved } = useAppearance();
|
|
const isDark = resolved === 'dark';
|
|
|
|
return (
|
|
<Button
|
|
onPress={() => {
|
|
if (longPressTriggered.current) {
|
|
longPressTriggered.current = false;
|
|
return;
|
|
}
|
|
onPress();
|
|
}}
|
|
onPressIn={() => {
|
|
longPressTriggered.current = false;
|
|
}}
|
|
onLongPress={() => {
|
|
longPressTriggered.current = true;
|
|
onLongPress?.();
|
|
}}
|
|
position="fixed"
|
|
bottom={88}
|
|
right={20}
|
|
zIndex={1100}
|
|
width={56}
|
|
height={56}
|
|
borderRadius={999}
|
|
backgroundColor="$primary"
|
|
borderWidth={0}
|
|
elevation={4}
|
|
shadowColor={isDark ? 'rgba(255, 79, 216, 0.5)' : 'rgba(15, 23, 42, 0.2)'}
|
|
shadowOpacity={0.5}
|
|
shadowRadius={18}
|
|
shadowOffset={{ width: 0, height: 10 }}
|
|
style={{
|
|
boxShadow: isDark
|
|
? '0 18px 36px rgba(255, 79, 216, 0.35), 0 0 0 6px rgba(255, 79, 216, 0.15)'
|
|
: '0 16px 28px rgba(15, 23, 42, 0.18), 0 0 0 6px rgba(255, 255, 255, 0.7)',
|
|
}}
|
|
>
|
|
<Plus size={22} color="white" />
|
|
</Button>
|
|
);
|
|
}
|