first implementation of tamagui mobile pages

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

@@ -0,0 +1,55 @@
+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 { useTranslation } from 'react-i18next';
+
+type SheetProps = {
+  open: boolean;
+  title: string;
+  onClose: () => void;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  /** Optional bottom offset so content sits above the bottom nav/safe-area. */
+  bottomOffsetPx?: number;
+};
+
+export function MobileSheet({ open, title, onClose, children, footer, bottomOffsetPx = 88 }: SheetProps) {
+  const { t } = useTranslation('mobile');
+  if (!open) return null;
+  return (
+    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm">
+      <YStack
+        width="100%"
+        maxWidth={520}
+        borderTopLeftRadius={24}
+        borderTopRightRadius={24}
+        backgroundColor="white"
+        padding="$4"
+        paddingBottom="$7"
+        space="$3"
+        shadowColor="#0f172a"
+        shadowOpacity={0.12}
+        shadowRadius={18}
+        shadowOffset={{ width: 0, height: -8 }}
+        maxHeight="82vh"
+        overflow="auto"
+        // keep sheet above bottom nav / safe area
+        style={{ marginBottom: `max(env(safe-area-inset-bottom, 0px), ${bottomOffsetPx}px)` }}
+      >
+        <XStack alignItems="center" justifyContent="space-between">
+          <Text fontSize="$md" fontWeight="800" color="#111827">
+            {title}
+          </Text>
+          <Pressable onPress={onClose}>
+            <Text fontSize="$md" color="#6b7280">
+              {t('actions.close', 'Close')}
+            </Text>
+          </Pressable>
+        </XStack>
+        {children}
+        {footer ? footer : null}
+      </YStack>
+    </div>
+  );
+}