All files / app/detail/components NutrientBar.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * 营养成分进度条组件
 */
 
import { Text, XStack, YStack } from 'tamagui';
 
interface NutrientBarProps {
  /** 营养成分名称 */
  label: string;
  /** 百分比值 */
  value: number;
  /** 进度条颜色（Tamagui token） */
  color: string;
}
 
export function NutrientBar({ label, value, color }: NutrientBarProps) {
  return (
    <YStack gap="$1.5">
      <XStack justifyContent="space-between" alignItems="center">
        <Text fontSize="$3" color="$gray11" fontWeight="600">
          {label}
        </Text>
        <Text fontSize="$5" color={color as any} fontWeight="800" letterSpacing={-0.5}>
          {value.toFixed(1)}%
        </Text>
      </XStack>
      <YStack
        height={10}
        backgroundColor="$gray3"
        borderRadius="$3"
        overflow="hidden"
        borderWidth={1}
        borderColor="$borderColor"
      >
        <YStack
          height="100%"
          width={`${Math.min(value, 100)}%`}
          backgroundColor={color as any}
          borderRadius="$3"
        />
      </YStack>
    </YStack>
  );
}