116 lines
4.1 KiB
TypeScript
116 lines
4.1 KiB
TypeScript
import React from 'react';
|
|
import { useLocation } from 'react-router-dom';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Pressable } from '@tamagui/react-native-web-lite';
|
|
import { Home, CheckSquare, Image as ImageIcon, User, LayoutDashboard } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useAdminTheme } from '../theme';
|
|
import { adminPath } from '../../constants';
|
|
|
|
const ICON_SIZE = 24;
|
|
|
|
export type NavKey = 'home' | 'tasks' | 'uploads' | 'profile';
|
|
|
|
export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate: (key: NavKey) => void }) {
|
|
const { t } = useTranslation('mobile');
|
|
const location = useLocation();
|
|
const theme = useAdminTheme();
|
|
|
|
// Modern Glass Background
|
|
const navSurface = theme.glassSurfaceStrong ?? theme.surfaceMuted ?? theme.surface;
|
|
const navBorder = theme.glassBorder ?? theme.border;
|
|
const navShadow = theme.glassShadow ?? theme.shadow;
|
|
|
|
const [pressedKey, setPressedKey] = React.useState<NavKey | null>(null);
|
|
|
|
const isDeepHome = active === 'home' && location.pathname !== adminPath('/mobile/dashboard');
|
|
|
|
const items: Array<{ key: NavKey; icon: React.ComponentType<{ size?: number; color?: string; strokeWidth?: number }>; label: string }> = [
|
|
{ key: 'home', icon: isDeepHome ? LayoutDashboard : Home, label: t('nav.home', 'Home') },
|
|
{ key: 'tasks', icon: CheckSquare, label: t('nav.tasks', 'Photo tasks') },
|
|
{ key: 'uploads', icon: ImageIcon, label: t('nav.uploads', 'Uploads') },
|
|
{ key: 'profile', icon: User, label: t('nav.profile', 'Profile') },
|
|
];
|
|
|
|
return (
|
|
<YStack
|
|
position="fixed"
|
|
bottom={0}
|
|
left={0}
|
|
right={0}
|
|
backgroundColor={navSurface}
|
|
borderTopWidth={1}
|
|
borderColor={navBorder}
|
|
paddingVertical="$2.5"
|
|
paddingHorizontal="$4"
|
|
zIndex={50}
|
|
shadowColor={navShadow}
|
|
shadowOpacity={0.08}
|
|
shadowRadius={20}
|
|
shadowOffset={{ width: 0, height: -8 }}
|
|
style={{
|
|
paddingBottom: 'max(env(safe-area-inset-bottom, 0px), 8px)',
|
|
backdropFilter: 'blur(20px)',
|
|
WebkitBackdropFilter: 'blur(20px)',
|
|
}}
|
|
>
|
|
<XStack width="100%" maxWidth={800} marginHorizontal="auto" justifyContent="space-around" alignItems="center">
|
|
{items.map((item) => {
|
|
const activeState = item.key === active;
|
|
const isPressed = pressedKey === item.key;
|
|
const IconCmp = item.icon;
|
|
|
|
// Dynamic Styles
|
|
const color = activeState ? theme.primary : theme.muted;
|
|
const strokeWidth = activeState ? 2.5 : 2;
|
|
|
|
return (
|
|
<Pressable
|
|
key={item.key}
|
|
onPress={() => onNavigate(item.key)}
|
|
onPressIn={() => setPressedKey(item.key)}
|
|
onPressOut={() => setPressedKey(null)}
|
|
onPointerLeave={() => setPressedKey(null)}
|
|
style={{ flex: 1 }}
|
|
>
|
|
<YStack
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
space="$1"
|
|
minHeight={50}
|
|
style={{
|
|
transform: isPressed ? 'scale(0.92)' : (activeState ? 'scale(1.05)' : 'scale(1)'),
|
|
transition: 'transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1)',
|
|
}}
|
|
>
|
|
{activeState && (
|
|
<YStack
|
|
position="absolute"
|
|
top={-12}
|
|
width={4}
|
|
height={4}
|
|
borderRadius={2}
|
|
backgroundColor={theme.primary}
|
|
/>
|
|
)}
|
|
|
|
<IconCmp size={ICON_SIZE} color={color} strokeWidth={strokeWidth} />
|
|
|
|
<Text
|
|
fontSize={10}
|
|
fontWeight={activeState ? "700" : "500"}
|
|
color={color}
|
|
textAlign="center"
|
|
>
|
|
{item.label}
|
|
</Text>
|
|
</YStack>
|
|
</Pressable>
|
|
);
|
|
})}
|
|
</XStack>
|
|
</YStack>
|
|
);
|
|
}
|