75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import { useLocation, useNavigate } from 'react-router-dom';
|
|
import { XStack, YStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Button } from '@tamagui/button';
|
|
import { Home, Image, Share2 } from 'lucide-react';
|
|
import { useEventData } from '../context/EventDataContext';
|
|
import { buildEventPath } from '../lib/routes';
|
|
import { useTranslation } from '@/guest/i18n/useTranslation';
|
|
import { useGuestThemeVariant } from '../lib/guestTheme';
|
|
|
|
export default function BottomDock() {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const { token } = useEventData();
|
|
const { t } = useTranslation();
|
|
const { isDark } = useGuestThemeVariant();
|
|
|
|
const dockItems = [
|
|
{ key: 'home', label: t('navigation.home', 'Home'), path: '/', icon: Home },
|
|
{ key: 'gallery', label: t('navigation.gallery', 'Gallery'), path: '/gallery', icon: Image },
|
|
{ key: 'share', label: t('navigation.share', 'Share'), path: '/share', icon: Share2 },
|
|
];
|
|
const activeIconColor = isDark ? '#F8FAFF' : '#0F172A';
|
|
const inactiveIconColor = isDark ? '#94A3B8' : '#64748B';
|
|
|
|
return (
|
|
<XStack
|
|
position="fixed"
|
|
left={0}
|
|
right={0}
|
|
bottom={0}
|
|
zIndex={1000}
|
|
paddingHorizontal="$4"
|
|
paddingBottom="$3"
|
|
paddingTop="$2"
|
|
alignItems="flex-end"
|
|
justifyContent="space-between"
|
|
borderTopWidth={1}
|
|
borderColor="rgba(255, 255, 255, 0.08)"
|
|
style={{
|
|
paddingBottom: 'calc(12px + env(safe-area-inset-bottom))',
|
|
backgroundColor: isDark ? 'rgba(10, 14, 28, 0.85)' : 'rgba(255, 255, 255, 0.9)',
|
|
backdropFilter: 'saturate(160%) blur(18px)',
|
|
WebkitBackdropFilter: 'saturate(160%) blur(18px)',
|
|
}}
|
|
>
|
|
{dockItems.map((item) => {
|
|
const targetPath = buildEventPath(token, item.path);
|
|
const active = location.pathname === targetPath || (item.path !== '/' && location.pathname.startsWith(targetPath));
|
|
const Icon = item.icon;
|
|
return (
|
|
<Button
|
|
key={item.key}
|
|
unstyled
|
|
onPress={() => navigate(targetPath)}
|
|
padding="$2"
|
|
borderRadius="$pill"
|
|
backgroundColor={active ? '$surface' : 'transparent'}
|
|
borderWidth={active ? 1 : 0}
|
|
borderColor={active ? '$borderColor' : 'transparent'}
|
|
>
|
|
<YStack alignItems="center" gap="$1">
|
|
<Icon size={18} color={active ? activeIconColor : inactiveIconColor} />
|
|
<Text fontSize="$1" color={active ? '$color' : '$color'} opacity={active ? 1 : 0.6}>
|
|
{item.label}
|
|
</Text>
|
|
</YStack>
|
|
</Button>
|
|
);
|
|
})}
|
|
</XStack>
|
|
);
|
|
}
|