upgrade to tamagui v2 and guest pwa overhaul

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

@@ -0,0 +1,97 @@
+import React from 'react';
+import { XStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Button } from '@tamagui/button';
+import { Bell, Settings } from 'lucide-react';
+import { useAppearance } from '@/hooks/use-appearance';
+
+type TopBarProps = {
+  eventName: string;
+  onProfilePress?: () => void;
+  onNotificationsPress?: () => void;
+  notificationCount?: number;
+};
+
+export default function TopBar({
+  eventName,
+  onProfilePress,
+  onNotificationsPress,
+  notificationCount = 0,
+}: TopBarProps) {
+  const { resolved } = useAppearance();
+  const isDark = resolved === 'dark';
+
+  return (
+    <XStack
+      alignItems="center"
+      justifyContent="space-between"
+      paddingHorizontal="$4"
+      paddingVertical="$3"
+      style={{
+        backgroundColor: isDark ? 'rgba(10, 14, 28, 0.72)' : 'rgba(255, 255, 255, 0.85)',
+        backdropFilter: 'saturate(160%) blur(18px)',
+        WebkitBackdropFilter: 'saturate(160%) blur(18px)',
+      }}
+    >
+      <Text
+        fontSize="$6"
+        fontFamily="$display"
+        fontWeight="$8"
+        numberOfLines={1}
+        style={{ textShadow: '0 6px 18px rgba(2, 6, 23, 0.7)' }}
+      >
+        {eventName}
+      </Text>
+      <XStack gap="$2" alignItems="center">
+        <Button
+          size="$3"
+          circular
+          borderWidth={1}
+          borderColor={isDark ? 'rgba(255, 255, 255, 0.14)' : 'rgba(15, 23, 42, 0.14)'}
+          style={{
+            backgroundColor: isDark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(15, 23, 42, 0.06)',
+            boxShadow: isDark ? '0 8px 18px rgba(2, 6, 23, 0.4)' : '0 8px 18px rgba(15, 23, 42, 0.12)',
+            position: 'relative',
+          }}
+          onPress={onNotificationsPress}
+        >
+          <Bell size={16} color={isDark ? '#F8FAFF' : '#0F172A'} />
+          {notificationCount > 0 ? (
+            <span
+              style={{
+                position: 'absolute',
+                top: -2,
+                right: -2,
+                width: 18,
+                height: 18,
+                borderRadius: 999,
+                backgroundColor: '#F97316',
+                color: '#0B101E',
+                fontSize: 10,
+                fontWeight: 700,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              {notificationCount > 9 ? '9+' : notificationCount}
+            </span>
+          ) : null}
+        </Button>
+        <Button
+          size="$3"
+          circular
+          borderWidth={1}
+          borderColor={isDark ? 'rgba(255, 255, 255, 0.14)' : 'rgba(15, 23, 42, 0.14)'}
+          style={{
+            backgroundColor: isDark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(15, 23, 42, 0.06)',
+            boxShadow: isDark ? '0 8px 18px rgba(2, 6, 23, 0.4)' : '0 8px 18px rgba(15, 23, 42, 0.12)',
+          }}
+          onPress={onProfilePress}
+        >
+          <Settings size={16} color={isDark ? '#F8FAFF' : '#0F172A'} />
+        </Button>
+      </XStack>
+    </XStack>
+  );
+}