Ichitux
45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet } from 'react-native';
|
|
import { useThemeContext } from './ThemeProvider';
|
|
import { borderRadius, spacing } from '../constants/theme';
|
|
|
|
interface StockBadgeProps {
|
|
stock: number;
|
|
}
|
|
|
|
export function StockBadge({ stock }: StockBadgeProps) {
|
|
const { colors, isDark } = useThemeContext();
|
|
|
|
const getBadgeColors = () => {
|
|
if (stock === 0) {
|
|
return { bg: isDark ? '#3a1a1a' : '#feecec', text: isDark ? '#ef9a9a' : '#b91c1c' };
|
|
}
|
|
if (stock < 5) {
|
|
return { bg: isDark ? '#3a3010' : '#fff3cd', text: isDark ? '#ffd54f' : '#FF9500' };
|
|
}
|
|
return { bg: isDark ? '#1a3a1c' : '#eaf7ec', text: isDark ? '#81c784' : '#34C759' };
|
|
};
|
|
|
|
const badgeColors = getBadgeColors();
|
|
|
|
return (
|
|
<View style={[styles.badge, { backgroundColor: badgeColors.bg }]}>
|
|
<Text style={[styles.text, { color: badgeColors.text }]}>
|
|
{stock === 0 ? 'Sin stock' : stock < 5 ? `Bajo (${stock})` : `Disponible (${stock})`}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
badge: {
|
|
paddingHorizontal: spacing.sm,
|
|
paddingVertical: spacing.xs,
|
|
borderRadius: borderRadius.sm,
|
|
},
|
|
text: {
|
|
fontSize: 12,
|
|
fontWeight: '600',
|
|
},
|
|
});
|