first implementation of tamagui mobile pages

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

@@ -0,0 +1,59 @@
+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 { ChevronLeft } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+type MobileScaffoldProps = {
+  title: string;
+  onBack?: () => void;
+  rightSlot?: React.ReactNode;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+};
+
+export function MobileScaffold({ title, onBack, rightSlot, children, footer }: MobileScaffoldProps) {
+  const { t } = useTranslation('mobile');
+  return (
+    <YStack backgroundColor="#f7f8fb" minHeight="100vh">
+      <XStack
+        alignItems="center"
+        justifyContent="space-between"
+        paddingHorizontal="$4"
+        paddingTop="$4"
+        paddingBottom="$3"
+        backgroundColor="white"
+        borderBottomWidth={1}
+        borderColor="#e5e7eb"
+      >
+        <XStack alignItems="center" space="$2">
+          {onBack ? (
+            <Pressable onPress={onBack}>
+              <XStack alignItems="center" space="$1.5">
+                <ChevronLeft size={18} color="#007AFF" />
+                <Text fontSize="$sm" color="#007AFF" fontWeight="600">
+                  {t('actions.back', 'Back')}
+                </Text>
+              </XStack>
+            </Pressable>
+          ) : (
+            <Text />
+          )}
+        </XStack>
+        <Text fontSize="$lg" fontWeight="800" color="#111827">
+          {title}
+        </Text>
+        <XStack minWidth={40} justifyContent="flex-end">
+          {rightSlot ?? null}
+        </XStack>
+      </XStack>
+
+      <YStack flex={1} padding="$4" space="$3" paddingBottom={footer ? '$14' : '$5'}>
+        {children}
+      </YStack>
+
+      {footer ? <YStack>{footer}</YStack> : null}
+    </YStack>
+  );
+}