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

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

@@ -235,9 +235,7 @@ function EventsList({
onEdit?: (slug: string) => void;
}) {
const { t } = useTranslation('management');
const { text, muted, subtle, border, primary, surface, surfaceMuted, accentSoft, accent, shadow } = useAdminTheme();
const activeBg = accentSoft;
const activeBorder = accent;
const { text, muted, subtle, border, primary, surface, surfaceMuted, shadow } = useAdminTheme();
const statusCounts = React.useMemo(() => buildEventStatusCounts(events), [events]);
const filteredByStatus = React.useMemo(
@@ -313,56 +311,49 @@ function EventsList({
</Text>
</XStack>
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
<XStack
<ToggleGroup
type="single"
value={statusFilter}
onValueChange={(value: string) => value && onStatusChange(value as EventStatusKey)}
disableDeactivation
orientation="horizontal"
flexDirection="row"
alignItems="center"
padding="$1"
borderRadius={999}
gap="$1.5"
borderRadius="$pill"
borderWidth={1}
borderColor={border}
backgroundColor={surfaceMuted}
>
<ToggleGroup
type="single"
value={statusFilter}
onValueChange={(value: string) => value && onStatusChange(value as EventStatusKey)}
>
<XStack gap="$1.5">
{filters.map((filter) => {
const active = filter.key === statusFilter;
return (
<ToggleGroup.Item
key={filter.key}
value={filter.key}
borderRadius={999}
borderWidth={1}
borderColor={active ? activeBorder : 'transparent'}
backgroundColor={active ? activeBg : 'transparent'}
paddingVertical="$1.5"
paddingHorizontal="$3"
>
<XStack alignItems="center" gap="$1.5">
<Text fontSize="$xs" fontWeight="700" color={active ? primary : muted}>
{filter.label}
</Text>
<XStack
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>
{filters.map((filter) => (
<ToggleGroup.Item
key={filter.key}
value={filter.key}
borderRadius="$pill"
paddingVertical="$1.5"
paddingHorizontal="$3"
>
<XStack alignItems="center" gap="$1.5">
<Text fontSize="$xs" fontWeight="600">
{filter.label}
</Text>
<XStack
paddingHorizontal="$1.5"
paddingVertical="$0.5"
borderRadius="$pill"
borderWidth={1}
borderColor={border}
backgroundColor="$backgroundStrong"
>
<Text fontSize={10} fontWeight="700">
{filter.count}
</Text>
</XStack>
</XStack>
</ToggleGroup.Item>
))}
</ToggleGroup>
</ScrollView>
</YStack>