feat: add UI components (SearchBar, MedicineCard, StockBadge, LoadingSpinner)

2026-07-06 11:08:40 +02:00
parent 47f63eacc7
commit 39331e2f6e
4 changed files with 269 additions and 0 deletions
@@ -0,0 +1,48 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { colors, borderRadius, spacing } from '../constants/theme';
+
+interface StockBadgeProps {
+  stock: number;
+}
+
+export function StockBadge({ stock }: StockBadgeProps) {
+  const getBadgeStyle = () => {
+    if (stock === 0) return styles.danger;
+    if (stock < 5) return styles.warning;
+    return styles.success;
+  };
+
+  const getText = () => {
+    if (stock === 0) return 'Sin stock';
+    if (stock < 5) return `Bajo (${stock})`;
+    return `Disponible (${stock})`;
+  };
+
+  return (
+    <View style={[styles.badge, getBadgeStyle()]}>
+      <Text style={styles.text}>{getText()}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  badge: {
+    paddingHorizontal: spacing.sm,
+    paddingVertical: spacing.xs,
+    borderRadius: borderRadius.sm,
+  },
+  success: {
+    backgroundColor: '#D4EDDA',
+  },
+  warning: {
+    backgroundColor: '#FFF3CD',
+  },
+  danger: {
+    backgroundColor: '#F8D7DA',
+  },
+  text: {
+    fontSize: 12,
+    fontWeight: '600',
+  },
+});