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

101
resources/js/admin/mobile/EventMembersPage.tsx
View File

@@ -5,6 +5,7 @@ import { Trash2, Copy, RefreshCcw } 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 { ToggleGroup } from '@tamagui/toggle-group';
import { MobileShell, HeaderActionButton } from './components/MobileShell';
import { MobileCard, CTAButton, PillBadge, SkeletonCard } from './components/Primitives';
import { MobileField, MobileInput, MobileSelect } from './components/FormControls';
@@ -227,51 +228,67 @@ export default function MobileEventMembersPage() {
<Text fontSize="$xs" fontWeight="700" color={muted}>
{t('events.members.filters.statusLabel', 'Status')}
</Text>
<XStack gap="$2" flexWrap="wrap">
{statusOptions.map((option) => {
const isActive = statusFilter === option.key;
return (
<Pressable key={option.key} onPress={() => setStatusFilter(option.key)}>
<XStack
paddingHorizontal="$3"
paddingVertical="$1.5"
borderRadius={999}
borderWidth={1}
borderColor={isActive ? primary : border}
backgroundColor={isActive ? primary : 'transparent'}
>
<Text fontSize="$xs" fontWeight="700" color={isActive ? 'white' : text}>
{option.label}
</Text>
</XStack>
</Pressable>
);
})}
</XStack>
<ToggleGroup
type="single"
value={statusFilter}
onValueChange={(value: string) => value && setStatusFilter(value as typeof statusFilter)}
disableDeactivation
orientation="horizontal"
flexDirection="row"
flexWrap="wrap"
gap="$2"
padding="$1"
borderRadius="$pill"
borderWidth={1}
borderColor={border}
backgroundColor="$background"
>
{statusOptions.map((option) => (
<ToggleGroup.Item
key={option.key}
value={option.key}
borderRadius="$pill"
paddingHorizontal="$3"
paddingVertical="$1.5"
>
<Text fontSize="$xs" fontWeight="600">
{option.label}
</Text>
</ToggleGroup.Item>
))}
</ToggleGroup>
<Text fontSize="$xs" fontWeight="700" color={muted}>
{t('events.members.filters.roleLabel', 'Role')}
</Text>
<XStack gap="$2" flexWrap="wrap">
{roleOptions.map((option) => {
const isActive = roleFilter === option.key;
return (
<Pressable key={option.key} onPress={() => setRoleFilter(option.key)}>
<XStack
paddingHorizontal="$3"
paddingVertical="$1.5"
borderRadius={999}
borderWidth={1}
borderColor={isActive ? primary : border}
backgroundColor={isActive ? primary : 'transparent'}
>
<Text fontSize="$xs" fontWeight="700" color={isActive ? 'white' : text}>
{option.label}
</Text>
</XStack>
</Pressable>
);
})}
</XStack>
<ToggleGroup
type="single"
value={roleFilter}
onValueChange={(value: string) => value && setRoleFilter(value as typeof roleFilter)}
disableDeactivation
orientation="horizontal"
flexDirection="row"
flexWrap="wrap"
gap="$2"
padding="$1"
borderRadius="$pill"
borderWidth={1}
borderColor={border}
backgroundColor="$background"
>
{roleOptions.map((option) => (
<ToggleGroup.Item
key={option.key}
value={option.key}
borderRadius="$pill"
paddingHorizontal="$3"
paddingVertical="$1.5"
>
<Text fontSize="$xs" fontWeight="600">
{option.label}
</Text>
</ToggleGroup.Item>
))}
</ToggleGroup>
</YStack>
) : null}