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 | 4x 3x 3x 6x 1x | /**
* 识别的添加剂/成分列表组件
*/
import { Card, Spinner, Text, XStack, YStack } from 'tamagui';
import { Button } from '@/src/design-system/components';
interface IdentifiedItemsSectionProps {
title: string;
items: string[];
type: 'additive' | 'ingredient';
buttonColor: string;
loadingItem: string | null;
onItemClick: (item: string) => void;
}
export function IdentifiedItemsSection({
title,
items,
type,
buttonColor,
loadingItem,
onItemClick,
}: IdentifiedItemsSectionProps) {
if (!items || items.length === 0) return null;
const textColor = buttonColor.replace('3', '11');
return (
<Card
padding="$4"
marginHorizontal="$4"
marginBottom="$3"
backgroundColor="$background"
borderRadius="$4"
bordered
>
<YStack gap="$3">
<Text fontSize="$6" fontWeight="600" color="$color">
{title} ({items.length})
</Text>
<Text fontSize="$2" color="$gray10">
点击查看详情
</Text>
<XStack flexWrap="wrap" gap="$2">
{items.map((item, index) => (
<Button
key={index}
size="$3"
height={36}
paddingHorizontal="$3"
backgroundColor={buttonColor as any}
color={textColor as any}
borderRadius="$3"
onPress={() => onItemClick(item)}
disabled={loadingItem === item}
icon={
loadingItem === item ? <Spinner size="small" color={textColor as any} /> : undefined
}
>
<Text fontSize="$3" fontWeight="500" color={textColor as any}>
{item}
</Text>
</Button>
))}
</XStack>
</YStack>
</Card>
);
}
|