155 lines
4.1 KiB
TypeScript
155 lines
4.1 KiB
TypeScript
import React from 'react';
|
|
import { YStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Button } from '@tamagui/button';
|
|
import { useGuestThemeVariant } from '../lib/guestTheme';
|
|
|
|
export type CompassAction = {
|
|
key: string;
|
|
label: string;
|
|
icon?: React.ReactNode;
|
|
onPress?: () => void;
|
|
};
|
|
|
|
type CompassHubProps = {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
quadrants: [CompassAction, CompassAction, CompassAction, CompassAction];
|
|
centerAction: CompassAction;
|
|
title?: string;
|
|
};
|
|
|
|
const quadrantPositions: Array<{
|
|
top?: number;
|
|
right?: number;
|
|
bottom?: number;
|
|
left?: number;
|
|
}> = [
|
|
{ top: 0, left: 0 },
|
|
{ top: 0, right: 0 },
|
|
{ bottom: 0, left: 0 },
|
|
{ bottom: 0, right: 0 },
|
|
];
|
|
|
|
export default function CompassHub({
|
|
open,
|
|
onOpenChange,
|
|
quadrants,
|
|
centerAction,
|
|
title = 'Quick jump',
|
|
}: CompassHubProps) {
|
|
const close = () => onOpenChange(false);
|
|
const { isDark } = useGuestThemeVariant();
|
|
const [visible, setVisible] = React.useState(open);
|
|
const [closing, setClosing] = React.useState(false);
|
|
|
|
React.useEffect(() => {
|
|
if (open) {
|
|
setVisible(true);
|
|
setClosing(false);
|
|
return;
|
|
}
|
|
|
|
if (!visible) return;
|
|
setClosing(true);
|
|
const timeout = window.setTimeout(() => {
|
|
setVisible(false);
|
|
setClosing(false);
|
|
}, 520);
|
|
|
|
return () => {
|
|
window.clearTimeout(timeout);
|
|
};
|
|
}, [open, visible]);
|
|
|
|
if (!visible) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<YStack position="fixed" inset={0} zIndex={100000} pointerEvents="box-none">
|
|
<YStack
|
|
position="absolute"
|
|
inset={0}
|
|
backgroundColor={isDark ? 'rgba(15, 23, 42, 0.55)' : 'rgba(15, 23, 42, 0.22)'}
|
|
pointerEvents="auto"
|
|
onPress={close}
|
|
onClick={close}
|
|
onMouseDown={close}
|
|
onTouchStart={close}
|
|
/>
|
|
<YStack
|
|
position="absolute"
|
|
inset={0}
|
|
padding={24}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
pointerEvents="box-none"
|
|
>
|
|
<YStack alignItems="center" justifyContent="center" gap="$3" pointerEvents="auto">
|
|
<Text fontSize="$5" fontFamily="$display" fontWeight="$8" color="$color">
|
|
{title}
|
|
</Text>
|
|
<YStack
|
|
key={closing ? 'compass-out' : 'compass-in'}
|
|
width={280}
|
|
height={280}
|
|
position="relative"
|
|
className={closing ? 'guest-compass-flyout' : 'guest-compass-flyin'}
|
|
>
|
|
{quadrants.map((action, index) => (
|
|
<Button
|
|
key={action.key}
|
|
onPress={() => {
|
|
action.onPress?.();
|
|
close();
|
|
}}
|
|
width={120}
|
|
height={120}
|
|
borderRadius={24}
|
|
backgroundColor="$surface"
|
|
borderWidth={1}
|
|
borderColor="$borderColor"
|
|
position="absolute"
|
|
{...quadrantPositions[index]}
|
|
>
|
|
<YStack alignItems="center" gap="$2">
|
|
{action.icon}
|
|
<Text fontSize="$3" fontWeight="$7">
|
|
{action.label}
|
|
</Text>
|
|
</YStack>
|
|
</Button>
|
|
))}
|
|
|
|
<Button
|
|
onPress={() => {
|
|
centerAction.onPress?.();
|
|
close();
|
|
}}
|
|
width={90}
|
|
height={90}
|
|
borderRadius={45}
|
|
backgroundColor="$primary"
|
|
position="absolute"
|
|
top="50%"
|
|
left="50%"
|
|
style={{ transform: 'translate(-45px, -45px)' }}
|
|
>
|
|
<YStack alignItems="center" gap="$1">
|
|
{centerAction.icon}
|
|
<Text fontSize="$2" fontWeight="$7" color="white">
|
|
{centerAction.label}
|
|
</Text>
|
|
</YStack>
|
|
</Button>
|
|
</YStack>
|
|
<Text fontSize="$2" color="$color" opacity={0.6}>
|
|
Tap outside to close
|
|
</Text>
|
|
</YStack>
|
|
</YStack>
|
|
</YStack>
|
|
);
|
|
}
|