upgrade to tamagui v2 and guest pwa overhaul

resources/js/guest-v2/components/PhotoFrameTile.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { YStack } from '@tamagui/stacks';
+import { useAppearance } from '@/hooks/use-appearance';
+
+type PhotoFrameTileProps = {
+  height: number;
+  borderRadius?: number | string;
+  children?: React.ReactNode;
+  shimmer?: boolean;
+  shimmerDelayMs?: number;
+};
+
+export default function PhotoFrameTile({
+  height,
+  borderRadius = '$tile',
+  children,
+  shimmer = false,
+  shimmerDelayMs = 0,
+}: PhotoFrameTileProps) {
+  const { resolved } = useAppearance();
+  const isDark = resolved === 'dark';
+
+  return (
+    <YStack
+      height={height}
+      borderRadius={borderRadius}
+      padding={6}
+      backgroundColor={isDark ? 'rgba(255, 255, 255, 0.04)' : 'rgba(15, 23, 42, 0.04)'}
+      borderWidth={1}
+      borderColor={isDark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(15, 23, 42, 0.12)'}
+      style={{
+        boxShadow: isDark ? '0 18px 32px rgba(2, 6, 23, 0.4)' : '0 16px 28px rgba(15, 23, 42, 0.12)',
+      }}
+    >
+      <YStack
+        flex={1}
+        borderRadius={borderRadius}
+        backgroundColor="$muted"
+        borderWidth={1}
+        borderColor={isDark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(15, 23, 42, 0.1)'}
+        overflow="hidden"
+        position="relative"
+        style={{
+          boxShadow: isDark
+            ? 'inset 0 0 0 1px rgba(255, 255, 255, 0.06)'
+            : 'inset 0 0 0 1px rgba(15, 23, 42, 0.04)',
+        }}
+      >
+        {shimmer ? (
+          <YStack
+            position="absolute"
+            top={-40}
+            bottom={-40}
+            left="-60%"
+            width="60%"
+            backgroundColor="transparent"
+            style={{
+              backgroundImage:
+                'linear-gradient(120deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0))',
+              animation: 'guestNightShimmer 4.6s ease-in-out infinite',
+              animationDelay: `${shimmerDelayMs}ms`,
+            }}
+          />
+        ) : null}
+        <YStack position="relative" zIndex={1} flex={1}>
+          {children}
+        </YStack>
+      </YStack>
+    </YStack>
+  );
+}