57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { Button } from '@tamagui/button';
|
|
import { Flower } 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={20}
|
|
left="50%"
|
|
zIndex={1100}
|
|
width={68}
|
|
height={68}
|
|
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={22}
|
|
shadowOffset={{ width: 0, height: 10 }}
|
|
style={{
|
|
transform: 'translateX(-50%)',
|
|
boxShadow: isDark
|
|
? '0 20px 40px rgba(255, 79, 216, 0.38), 0 0 0 8px rgba(255, 79, 216, 0.16)'
|
|
: '0 18px 32px rgba(15, 23, 42, 0.2), 0 0 0 8px rgba(255, 255, 255, 0.7)',
|
|
}}
|
|
>
|
|
<Flower size={26} color="white" />
|
|
</Button>
|
|
);
|
|
}
|