All files / app/(tabs)/profile/components PetList.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Card, Spinner, Text, XStack, YStack } from 'tamagui';
import { IconSymbol } from '@/src/components/ui/IconSymbol';
import { Colors } from '@/src/constants/theme';
import { useThemeAwareColorScheme } from '@/src/hooks/useThemeAwareColorScheme';
import type { Pet } from '@/src/schemas/pet.schema';
 
import { PetCard } from './PetCard';
 
interface PetListProps {
  pets?: Pet[];
  isLoading?: boolean;
  onAddPet: () => void;
  onPetPress: (pet: Pet) => void;
}
 
export function PetList({ pets = [], isLoading, onAddPet: _onAddPet, onPetPress }: PetListProps) {
  const colorScheme = useThemeAwareColorScheme();
  const colors = Colors[colorScheme];
 
  return (
    <YStack width="90%" alignItems="center" gap="$3" marginTop="$4">
      {/* Section Header */}
      <XStack width="100%" justifyContent="flex-start" alignItems="center">
        <Text fontSize={20} fontWeight="700" color={colors.text}>
          我的宠物
        </Text>
      </XStack>
 
      {/* Pet Cards Container */}
      <YStack width="100%" gap="$3">
        {isLoading ? (
          <Card
            padding="$6"
            borderWidth={1}
            borderColor={colors.iconAlpha20 as any}
            backgroundColor={colors.background}
            borderRadius="$4"
          >
            <YStack alignItems="center" justifyContent="center" minHeight={150}>
              <Spinner size="large" color={colors.tint} />
            </YStack>
          </Card>
        ) : pets.length === 0 ? (
          <Card
            padding="$6"
            borderWidth={1}
            borderColor={colors.iconAlpha20 as any}
            backgroundColor={colors.background}
            borderRadius="$4"
          >
            <YStack alignItems="center" justifyContent="center" minHeight={150} gap="$3">
              <IconSymbol name="pawprint.fill" size={48} color={colors.icon + '60'} />
              <Text color={colors.icon} textAlign="center" fontSize={14}>
                还没有宠物，点击上方"添加"按钮
              </Text>
            </YStack>
          </Card>
        ) : (
          <>
            {pets.map((pet) => (
              <PetCard key={pet.id} pet={pet} onPress={() => onPetPress(pet)} />
            ))}
          </>
        )}
      </YStack>
    </YStack>
  );
}