upgrade to tamagui v2 and guest pwa overhaul

2026-02-02 13:01:20 +01:00
parent 2e78f3ab8d
commit 7c6e14ffe2
168 changed files with 47462 additions and 8914 deletions
--- a/resources/js/guest-v2/screens/mockups/MockupsIndexScreen.tsx
+++ b/resources/js/guest-v2/screens/mockups/MockupsIndexScreen.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { YStack, XStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Button } from '@tamagui/button';
+import { ArrowRight } from 'lucide-react';
+import MockupFrame from './MockupFrame';
+import { MockupCard, MockupLabel } from './MockupPrimitives';
+
+const mockups = [
+  { id: '1', title: 'Capture Orbit', description: 'Full-screen capture hub with orbiting actions.' },
+  { id: '2', title: 'Gallery Mosaic', description: 'Image-first grid with filters and fast scan.' },
+  { id: '3', title: 'Prompt Quest', description: 'Prompt hero with progress and task ladder.' },
+  { id: '4', title: 'Timeline Stream', description: 'Chronological feed with time markers.' },
+  { id: '5', title: 'Compass Hub', description: 'Quadrant navigation around a central action.' },
+  { id: '6', title: 'Split Capture', description: 'Camera preview plus quick tools and queue.' },
+  { id: '7', title: 'Swipe Deck', description: 'Stacked cards for rapid review.' },
+  { id: '8', title: 'Daybook', description: 'Morning/afternoon/night memory sections.' },
+  { id: '9', title: 'Checklist Flow', description: 'Tasks checklist paired with gallery progress.' },
+  { id: '10', title: 'Spotlight Reel', description: 'Live highlight reel with action strip.' },
+];
+
+export default function MockupsIndexScreen() {
+  const navigate = useNavigate();
+
+  return (
+    <MockupFrame
+      title="Guest PWA mockups"
+      subtitle="10 layout concepts for the new event experience"
+    >
+      <MockupCard gap="$2">
+        <XStack alignItems="center" justifyContent="space-between">
+          <YStack gap="$1">
+            <Text fontSize="$5" fontWeight="$8" fontFamily="$display">
+              Home concepts
+            </Text>
+            <MockupLabel>Explore 10 start screen ideas.</MockupLabel>
+          </YStack>
+          <Button
+            size="$3"
+            backgroundColor="$primary"
+            borderRadius="$pill"
+            onPress={() => navigate('/mockups/home')}
+          >
+            <XStack alignItems="center" gap="$2">
+              <Text fontSize="$3" color="white">
+                Open
+              </Text>
+              <ArrowRight size={16} color="white" />
+            </XStack>
+          </Button>
+        </XStack>
+      </MockupCard>
+
+      <YStack gap="$3">
+        {mockups.map((mockup) => (
+          <MockupCard key={mockup.id} gap="$2">
+            <XStack alignItems="center" justifyContent="space-between">
+              <Text fontSize="$5" fontWeight="$8" fontFamily="$display">
+                {mockup.title}
+              </Text>
+              <Button
+                size="$3"
+                backgroundColor="$primary"
+                borderRadius="$pill"
+                onPress={() => navigate(`/mockups/${mockup.id}`)}
+              >
+                <XStack alignItems="center" gap="$2">
+                  <Text fontSize="$3" color="white">
+                    View
+                  </Text>
+                  <ArrowRight size={16} color="white" />
+                </XStack>
+              </Button>
+            </XStack>
+            <MockupLabel>{mockup.description}</MockupLabel>
+          </MockupCard>
+        ))}
+      </YStack>
+    </MockupFrame>
+  );
+}