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

Refine event status filter styling

Browse Source
This commit is contained in:
Codex Agent
2026-01-20 13:29:43 +01:00
parent a70a842778
commit 09132125c6
1 changed files with 49 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
resources/js/admin/mobile/EventsPage.tsx
View File

@@ -313,36 +313,56 @@ function EventsList({
</Text> </Text>
</XStack> </XStack>
<ScrollView horizontal showsHorizontalScrollIndicator={false}> <ScrollView horizontal showsHorizontalScrollIndicator={false}>
<ToggleGroup <XStack
type="single" alignItems="center"
value={statusFilter} padding="$1"
onValueChange={(value) => value && onStatusChange(value as EventStatusKey)} borderRadius={999}
borderWidth={1}
borderColor={border}
backgroundColor={surfaceMuted}
> >
<XStack space="$2" paddingVertical="$1"> <ToggleGroup
{filters.map((filter) => { type="single"
const active = filter.key === statusFilter; value={statusFilter}
return ( onValueChange={(value) => value && onStatusChange(value as EventStatusKey)}
<ToggleGroup.Item >
key={filter.key} <XStack space="$1.5">
value={filter.key} {filters.map((filter) => {
borderRadius={999} const active = filter.key === statusFilter;
borderWidth={1} return (
borderColor={active ? activeBorder : border} <ToggleGroup.Item
backgroundColor={active ? activeBg : surface} key={filter.key}
paddingVertical="$2" value={filter.key}
paddingHorizontal="$3" borderRadius={999}
> borderWidth={1}
<XStack alignItems="center" space="$1.5"> borderColor={active ? activeBorder : 'transparent'}
<Text fontSize="$xs" fontWeight="700" color={active ? primary : muted}> backgroundColor={active ? activeBg : 'transparent'}
{filter.label} paddingVertical="$1.5"
</Text> paddingHorizontal="$3"
<PillBadge tone={active ? 'success' : 'muted'}>{filter.count}</PillBadge> >
</XStack> <XStack alignItems="center" space="$1.5">
</ToggleGroup.Item> <Text fontSize="$xs" fontWeight="700" color={active ? primary : muted}>
); {filter.label}
})} </Text>
</XStack> <XStack
</ToggleGroup> paddingHorizontal="$1.5"
paddingVertical="$0.5"
borderRadius={999}
borderWidth={1}
borderColor={active ? activeBorder : border}
backgroundColor={surface}
>
<Text fontSize={10} fontWeight="800" color={active ? primary : muted}>
{filter.count}
</Text>
</XStack>
</XStack>
</ToggleGroup.Item>
);
})}
</XStack>
</ToggleGroup>
</XStack>
</ScrollView> </ScrollView>
</YStack> </YStack>