upgrade to tamagui v2 and guest pwa overhaul

resources/js/guest-v2/screens/mockups/MockupPrimitives.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { XStack, YStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+
+type StackProps = React.ComponentProps<typeof YStack>;
+
+type RowProps = React.ComponentProps<typeof XStack>;
+
+export function MockupCard({ children, ...props }: StackProps) {
+  return (
+    <YStack
+      padding="$4"
+      borderRadius="$card"
+      backgroundColor="$surface"
+      borderWidth={1}
+      borderColor="$borderColor"
+      gap="$3"
+      {...props}
+    >
+      {children}
+    </YStack>
+  );
+}
+
+export function MockupTile({ children, ...props }: StackProps) {
+  return (
+    <YStack
+      padding="$3"
+      borderRadius="$tile"
+      backgroundColor="$muted"
+      borderWidth={1}
+      borderColor="$borderColor"
+      gap="$2"
+      {...props}
+    >
+      {children}
+    </YStack>
+  );
+}
+
+export function MockupChip({ children, ...props }: RowProps) {
+  return (
+    <XStack
+      alignItems="center"
+      gap="$2"
+      paddingVertical="$2"
+      paddingHorizontal="$3"
+      borderRadius="$pill"
+      backgroundColor="$surface"
+      borderWidth={1}
+      borderColor="$borderColor"
+      {...props}
+    >
+      {children}
+    </XStack>
+  );
+}
+
+export function MockupLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <Text fontSize="$2" color="$color" opacity={0.6}>
+      {children}
+    </Text>
+  );
+}