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 | 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x | import { Text, XStack } from 'tamagui';
import { tagColors } from '@/src/design-system/tokens';
interface TagProps {
name: string;
index: number;
size?: 'sm' | 'md' | 'lg';
}
const sizeStyles = {
sm: { px: '$1.5', py: 2, fontSize: '$1' as const },
md: { px: '$2', py: '$1', fontSize: '$2' as const },
lg: { px: '$2.5', py: '$1.5', fontSize: '$3' as const },
};
function getContrastColor(hexColor: string): string {
const hex = hexColor.replace('#', '');
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
return luminance > 0.5 ? '#333333' : '#FFFFFF';
}
export default function Tag({ name, index, size = 'md' }: TagProps) {
const backgroundColor = tagColors[index % tagColors.length];
const textColor = getContrastColor(backgroundColor);
const styles = sizeStyles[size];
return (
<XStack
backgroundColor={backgroundColor as any}
paddingHorizontal={styles.px as any}
paddingVertical={styles.py as any}
borderRadius="$full"
marginRight="$1.5"
marginBottom="$1.5"
>
<Text fontSize={styles.fontSize} fontWeight="500" color={textColor as any}>
{name}
</Text>
</XStack>
);
}
|