Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 70 71 | 2x 2x 1x 2x | /**
* 营养成分列表 - 显示各营养成分详情
*/
import { View } from 'react-native';
import { Card, Separator, Text, XStack, YStack } from 'tamagui';
import type { Ingredient } from '@/src/lib/supabase/services/additive';
import { primaryScale, neutralScale } from '@/src/design-system/tokens';
interface NutritionListSectionProps {
ingredients: Ingredient[];
}
interface NutritionItemProps {
name: string;
label?: string;
isLast?: boolean;
}
function NutritionItem({ name, label, isLast = false }: NutritionItemProps) {
return (
<>
<XStack paddingVertical="$2" justifyContent="space-between" alignItems="center">
<Text fontSize="$3" color="$foreground">
{name}
</Text>
{label && (
<Text fontSize="$3" fontWeight="600" color={primaryScale.primary9}>
{label}
</Text>
)}
</XStack>
{!isLast && <Separator />}
</>
);
}
export function NutritionListSection({ ingredients }: NutritionListSectionProps) {
if (!ingredients || ingredients.length === 0) return null;
return (
<View testID="nutrition-section">
<Card
padding="$4"
marginHorizontal="$3"
marginBottom="$3"
backgroundColor="white"
borderRadius="$5"
bordered
borderColor={neutralScale.neutral3}
>
<YStack gap="$3">
<Text fontSize="$6" fontWeight="600" marginBottom="$2" color="$foreground">
营养成分详情
</Text>
<YStack marginTop="$2">
{ingredients.map((item, index) => (
<NutritionItem
key={item.id || index}
name={item.name}
label={item.label ?? undefined}
isLast={index === ingredients.length - 1}
/>
))}
</YStack>
</YStack>
</Card>
</View>
);
}
|