soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Adopt Tamagui defaults for tabs and filters
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (push) Has been cancelled
Details
tests / ui (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Codex Agent
2026-02-04 08:29:50 +01:00
parent 0535f63b40
commit eecb1a5b85
14 changed files with 650 additions and 622 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
resources/js/admin/mobile/EventRecapPage.tsx
View File

@@ -4,8 +4,8 @@ import { useTranslation } from 'react-i18next';
import { Share2, Sparkles, Trophy, Users, TrendingUp, Heart, Image as ImageIcon } from 'lucide-react';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Pressable } from '@tamagui/react-native-web-lite';
import { Switch } from '@tamagui/switch';
import { Tabs } from 'tamagui';
import { MobileShell } from './components/MobileShell';
import { MobileCard, CTAButton, PillBadge, SkeletonCard } from './components/Primitives';
import { LegalConsentSheet } from './components/LegalConsentSheet';
@@ -208,25 +208,31 @@ export default function MobileEventRecapPage() {
onBack={back}
>
<YStack gap="$4">
<XStack gap="$2">
<TabButton
label={t('events.recap.tabs.overview', 'Overview')}
active={activeTab === 'overview'}
onPress={() => setActiveTab('overview')}
/>
<TabButton
label={t('events.recap.tabs.engagement', 'Engagement')}
active={activeTab === 'engagement'}
onPress={() => setActiveTab('engagement')}
/>
<TabButton
label={t('events.recap.tabs.compliance', 'Compliance')}
active={activeTab === 'compliance'}
onPress={() => setActiveTab('compliance')}
/>
</XStack>
<Tabs
value={activeTab}
onValueChange={(value) => setActiveTab(value as typeof activeTab)}
orientation="horizontal"
flexDirection="column"
>
<Tabs.List gap="$2">
<Tabs.Tab value="overview" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
<Text fontSize="$sm" fontWeight="600" textAlign="center">
{t('events.recap.tabs.overview', 'Overview')}
</Text>
</Tabs.Tab>
<Tabs.Tab value="engagement" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
<Text fontSize="$sm" fontWeight="600" textAlign="center">
{t('events.recap.tabs.engagement', 'Engagement')}
</Text>
</Tabs.Tab>
<Tabs.Tab value="compliance" flex={1} paddingVertical="$2.5" paddingHorizontal="$3" borderRadius="$4">
<Text fontSize="$sm" fontWeight="600" textAlign="center">
{t('events.recap.tabs.compliance', 'Compliance')}
</Text>
</Tabs.Tab>
</Tabs.List>
{activeTab === 'overview' ? (
<Tabs.Content value="overview" paddingTop="$2">
<YStack gap="$4">
<MobileCard gap="$3">
<XStack alignItems="center" justifyContent="space-between">
@@ -362,9 +368,9 @@ export default function MobileEventRecapPage() {
</YStack>
</MobileCard>
</YStack>
) : null}
</Tabs.Content>
{activeTab === 'engagement' ? (
<Tabs.Content value="engagement" paddingTop="$2">
<YStack gap="$4">
{engagementLoading ? (
<YStack gap="$2">
@@ -550,13 +556,14 @@ export default function MobileEventRecapPage() {
</YStack>
)}
</YStack>
) : null}
</Tabs.Content>
{activeTab === 'compliance' ? (
<YStack gap="$4">
<DataExportsPanel variant="recap" event={event} />
</YStack>
) : null}
<Tabs.Content value="compliance" paddingTop="$2">
<YStack gap="$4">
<DataExportsPanel variant="recap" event={event} />
</YStack>
</Tabs.Content>
</Tabs>
</YStack>
<LegalConsentSheet
@@ -609,27 +616,6 @@ function ToggleOption({ label, value, onToggle }: { label: string; value: boolea
);
}
function TabButton({ label, active, onPress }: { label: string; active: boolean; onPress: () => void }) {
const { primary, surfaceMuted, border, surface, textStrong } = useAdminTheme();
return (
<Pressable onPress={onPress} style={{ flex: 1 }}>
<XStack
alignItems="center"
justifyContent="center"
paddingVertical="$2.5"
borderRadius={12}
backgroundColor={active ? primary : surfaceMuted}
borderWidth={1}
borderColor={active ? primary : border}
>
<Text fontSize="$sm" color={active ? surface : textStrong} fontWeight="700">
{label}
</Text>
</XStack>
</Pressable>
);
}
function LeaderboardRow({ rank, name, value }: { rank: number; name: string; value: string }) {
const { textStrong, muted, border, surfaceMuted } = useAdminTheme();
return (