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

weitere perfektionierung der neuen mobile app

Browse Source
This commit is contained in:
Codex Agent
2025-12-11 12:18:08 +01:00
parent 7b01a77083
commit b4417db5cd
38 changed files with 4265 additions and 3040 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
resources/js/admin/mobile/components/Primitives.tsx
View File

@@ -5,12 +5,13 @@ import { Pressable } from '@tamagui/react-native-web-lite';
import { useTheme } from '@tamagui/core';
export function MobileCard({ children, ...rest }: React.ComponentProps<typeof YStack>) {
const theme = useTheme();
return (
<YStack
backgroundColor="white"
backgroundColor={String(theme.surface?.val ?? 'white')}
borderRadius={16}
borderWidth={1}
borderColor="#e5e7eb"
borderColor={String(theme.borderColor?.val ?? '#e5e7eb')}
shadowColor="#0f172a"
shadowOpacity={0.06}
shadowRadius={12}
@@ -31,10 +32,23 @@ export function PillBadge({
tone?: 'success' | 'warning' | 'muted';
children: React.ReactNode;
}) {
const theme = useTheme();
const palette: Record<typeof tone, { bg: string; text: string; border: string }> = {
success: { bg: '#ecfdf3', text: '#047857', border: '#bbf7d0' },
warning: { bg: '#fffbeb', text: '#92400e', border: '#fef3c7' },
muted: { bg: '#f3f4f6', text: '#374151', border: '#e5e7eb' },
success: {
bg: String(theme.backgroundStrong?.val ?? '#ecfdf3'),
text: String(theme.green10?.val ?? '#047857'),
border: String(theme.green6?.val ?? '#bbf7d0'),
},
warning: {
bg: String(theme.yellow3?.val ?? '#fffbeb'),
text: String(theme.yellow11?.val ?? '#92400e'),
border: String(theme.yellow6?.val ?? '#fef3c7'),
},
muted: {
bg: String(theme.gray3?.val ?? '#f3f4f6'),
text: String(theme.gray11?.val ?? '#374151'),
border: String(theme.gray6?.val ?? '#e5e7eb'),
},
};
const colors = palette[tone] ?? palette.muted;
return (
@@ -72,11 +86,11 @@ export function CTAButton({
borderRadius={14}
alignItems="center"
justifyContent="center"
backgroundColor={isPrimary ? String(theme.primary?.val ?? '#007AFF') : 'white'}
backgroundColor={isPrimary ? String(theme.primary?.val ?? '#007AFF') : String(theme.surface?.val ?? 'white')}
borderWidth={isPrimary ? 0 : 1}
borderColor={isPrimary ? 'transparent' : '#e5e7eb'}
borderColor={isPrimary ? 'transparent' : String(theme.borderColor?.val ?? '#e5e7eb')}
>
<Text fontSize="$sm" fontWeight="800" color={isPrimary ? 'white' : '#111827'}>
<Text fontSize="$sm" fontWeight="800" color={isPrimary ? 'white' : String(theme.color?.val ?? '#111827')}>
{label}
</Text>
</XStack>
@@ -93,17 +107,25 @@ export function KpiTile({
label: string;
value: string | number;
}) {
const theme = useTheme();
return (
<MobileCard borderRadius={14} padding="$3" width="32%" minWidth={110} alignItems="flex-start">
<XStack alignItems="center" space="$2">
<XStack width={32} height={32} borderRadius={12} backgroundColor="#e5f0ff" alignItems="center" justifyContent="center">
<IconCmp size={16} color="#2563eb" />
<XStack
width={32}
height={32}
borderRadius={12}
backgroundColor={String(theme.blue3?.val ?? '#e5f0ff')}
alignItems="center"
justifyContent="center"
>
<IconCmp size={16} color={String(theme.primary?.val ?? '#2563eb')} />
</XStack>
<Text fontSize="$xs" color="#111827">
<Text fontSize="$xs" color={String(theme.color?.val ?? '#111827')}>
{label}
</Text>
</XStack>
<Text fontSize="$xl" fontWeight="800" color="#111827">
<Text fontSize="$xl" fontWeight="800" color={String(theme.color?.val ?? '#111827')}>
{value}
</Text>
</MobileCard>
@@ -121,6 +143,8 @@ export function ActionTile({
color: string;
onPress: () => void;
}) {
const theme = useTheme();
const text = String(theme.color12?.val ?? theme.color?.val ?? '#f8fafc');
return (
<Pressable onPress={onPress} style={{ width: '48%', marginBottom: 12 }}>
<YStack
@@ -137,7 +161,7 @@ export function ActionTile({
<XStack width={34} height={34} borderRadius={12} backgroundColor={color} alignItems="center" justifyContent="center">
<IconCmp size={16} color="white" />
</XStack>
<Text fontSize="$sm" fontWeight="700" color="#111827" textAlign="center">
<Text fontSize="$sm" fontWeight="700" color={text} textAlign="center">
{label}
</Text>
</YStack>