first implementation of tamagui mobile pages

resources/js/admin/mobile/components/BottomNav.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { YStack, XStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Pressable } from '@tamagui/react-native-web-lite';
+import { Home, CheckSquare, Bell, User } from 'lucide-react';
+import { useTheme } from '@tamagui/core';
+import { useTranslation } from 'react-i18next';
+import { useAlertsBadge } from '../hooks/useAlertsBadge';
+
+export type NavKey = 'events' | 'tasks' | 'alerts' | 'profile';
+
+export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate: (key: NavKey) => void }) {
+  const { t } = useTranslation('mobile');
+  const theme = useTheme();
+  const { count: alertCount } = useAlertsBadge();
+  const items: Array<{ key: NavKey; icon: React.ComponentType<{ size?: number; color?: string }>; label: string }> = [
+    { key: 'events', icon: Home, label: t('nav.events', 'Events') },
+    { key: 'tasks', icon: CheckSquare, label: t('nav.tasks', 'Tasks') },
+    { key: 'alerts', icon: Bell, label: t('nav.alerts', 'Alerts') },
+    { key: 'profile', icon: User, label: t('nav.profile', 'Profile') },
+  ];
+
+  return (
+    <YStack
+      position="fixed"
+      bottom={0}
+      left={0}
+      right={0}
+      backgroundColor="white"
+      borderTopWidth={1}
+      borderColor="#e5e7eb"
+      paddingVertical="$2"
+      paddingHorizontal="$4"
+      zIndex={50}
+      shadowColor="#0f172a"
+      shadowOpacity={0.08}
+      shadowRadius={12}
+      shadowOffset={{ width: 0, height: -4 }}
+      // allow for safe-area inset on modern phones
+      style={{ paddingBottom: 'max(env(safe-area-inset-bottom, 0px), 8px)' }}
+    >
+      <XStack justifyContent="space-between" alignItems="center">
+        {items.map((item) => {
+          const activeState = item.key === active;
+          const IconCmp = item.icon;
+          return (
+            <Pressable key={item.key} onPress={() => onNavigate(item.key)}>
+              <YStack alignItems="center" space="$1" position="relative">
+                <IconCmp size={20} color={activeState ? String(theme.primary?.val ?? '#007AFF') : '#94a3b8'} />
+                <Text fontSize="$xs" color={activeState ? '$primary' : '#6b7280'}>
+                  {item.label}
+                </Text>
+                {item.key === 'alerts' && alertCount > 0 ? (
+                  <XStack
+                    position="absolute"
+                    top={-6}
+                    right={-12}
+                    minWidth={18}
+                    height={18}
+                    paddingHorizontal={6}
+                    borderRadius={999}
+                    backgroundColor="#ef4444"
+                    alignItems="center"
+                    justifyContent="center"
+                  >
+                    <Text fontSize={10} color="white" fontWeight="700">
+                      {alertCount > 9 ? '9+' : alertCount}
+                    </Text>
+                  </XStack>
+                ) : null}
+              </YStack>
+            </Pressable>
+          );
+        })}
+      </XStack>
+    </YStack>
+  );
+}