145 lines
3.7 KiB
TypeScript
145 lines
3.7 KiB
TypeScript
import React from 'react';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Pressable } from '@tamagui/react-native-web-lite';
|
|
import { useTheme } from '@tamagui/core';
|
|
|
|
export function MobileCard({ children, ...rest }: React.ComponentProps<typeof YStack>) {
|
|
return (
|
|
<YStack
|
|
backgroundColor="white"
|
|
borderRadius={16}
|
|
borderWidth={1}
|
|
borderColor="#e5e7eb"
|
|
shadowColor="#0f172a"
|
|
shadowOpacity={0.06}
|
|
shadowRadius={12}
|
|
shadowOffset={{ width: 0, height: 8 }}
|
|
padding="$3.5"
|
|
space="$2"
|
|
{...rest}
|
|
>
|
|
{children}
|
|
</YStack>
|
|
);
|
|
}
|
|
|
|
export function PillBadge({
|
|
tone = 'muted',
|
|
children,
|
|
}: {
|
|
tone?: 'success' | 'warning' | 'muted';
|
|
children: React.ReactNode;
|
|
}) {
|
|
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' },
|
|
};
|
|
const colors = palette[tone] ?? palette.muted;
|
|
return (
|
|
<XStack
|
|
alignItems="center"
|
|
paddingHorizontal="$3"
|
|
paddingVertical="$1.5"
|
|
borderRadius={999}
|
|
borderWidth={1}
|
|
backgroundColor={colors.bg}
|
|
borderColor={colors.border}
|
|
>
|
|
<Text fontSize="$xs" fontWeight="700" color={colors.text}>
|
|
{children}
|
|
</Text>
|
|
</XStack>
|
|
);
|
|
}
|
|
|
|
export function CTAButton({
|
|
label,
|
|
onPress,
|
|
tone = 'primary',
|
|
}: {
|
|
label: string;
|
|
onPress: () => void;
|
|
tone?: 'primary' | 'ghost';
|
|
}) {
|
|
const theme = useTheme();
|
|
const isPrimary = tone === 'primary';
|
|
return (
|
|
<Pressable onPress={onPress} style={{ width: '100%' }}>
|
|
<XStack
|
|
height={56}
|
|
borderRadius={14}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
backgroundColor={isPrimary ? String(theme.primary?.val ?? '#007AFF') : 'white'}
|
|
borderWidth={isPrimary ? 0 : 1}
|
|
borderColor={isPrimary ? 'transparent' : '#e5e7eb'}
|
|
>
|
|
<Text fontSize="$sm" fontWeight="800" color={isPrimary ? 'white' : '#111827'}>
|
|
{label}
|
|
</Text>
|
|
</XStack>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
export function KpiTile({
|
|
icon: IconCmp,
|
|
label,
|
|
value,
|
|
}: {
|
|
icon: React.ComponentType<{ size?: number; color?: string }>;
|
|
label: string;
|
|
value: string | number;
|
|
}) {
|
|
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>
|
|
<Text fontSize="$xs" color="#111827">
|
|
{label}
|
|
</Text>
|
|
</XStack>
|
|
<Text fontSize="$xl" fontWeight="800" color="#111827">
|
|
{value}
|
|
</Text>
|
|
</MobileCard>
|
|
);
|
|
}
|
|
|
|
export function ActionTile({
|
|
icon: IconCmp,
|
|
label,
|
|
color,
|
|
onPress,
|
|
}: {
|
|
icon: React.ComponentType<{ size?: number; color?: string }>;
|
|
label: string;
|
|
color: string;
|
|
onPress: () => void;
|
|
}) {
|
|
return (
|
|
<Pressable onPress={onPress} style={{ width: '48%' }}>
|
|
<YStack
|
|
borderRadius={16}
|
|
padding="$3"
|
|
space="$2"
|
|
backgroundColor={`${color}22`}
|
|
borderWidth={1}
|
|
borderColor={`${color}55`}
|
|
minHeight={110}
|
|
>
|
|
<XStack width={38} height={38} borderRadius={12} backgroundColor={color} alignItems="center" justifyContent="center">
|
|
<IconCmp size={18} color="white" />
|
|
</XStack>
|
|
<Text fontSize="$sm" fontWeight="700" color="#111827">
|
|
{label}
|
|
</Text>
|
|
</YStack>
|
|
</Pressable>
|
|
);
|
|
}
|