build: 444813b5-5daf-49b2-bf1a-7e4caeab4e17

2026-06-21 21:12:46 +00:00
commit ffc4f44bde
142 changed files with 20459 additions and 0 deletions
@@ -0,0 +1,88 @@
+import React from 'react';
+import { IonIcon } from '@ionic/react';
+import {
+  chevronForwardOutline,
+  timeOutline,
+  flashOutline,
+  wifiOutline,
+  medkitOutline,
+} from 'ionicons/icons';
+
+interface CareAlertPillProps {
+  id: string;
+  type: string;
+  title: string;
+  severity: 'warning' | 'neutral';
+  onClick: (id: string) => void;
+}
+
+const CareAlertPill: React.FC<CareAlertPillProps> = ({
+  id,
+  type,
+  title,
+  severity,
+  onClick,
+}) => {
+  const getIconForType = () => {
+    switch (type) {
+      case 'electricity_low':
+        return flashOutline;
+      case 'airtime_expiring':
+        return wifiOutline;
+      case 'medication_due':
+        return medkitOutline;
+      default:
+        return timeOutline;
+    }
+  };
+
+  const getColors = () => {
+    if (severity === 'warning') {
+      return { bg: 'rgba(245,158,11,0.08)', icon: '#f59e0b', text: '#111827' };
+    }
+    return { bg: '#ffffff', icon: '#6d28d9', text: '#111827' };
+  };
+
+  const colors = getColors();
+
+  return (
+    <button
+      onClick={() => onClick(id)}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+        backgroundColor: colors.bg,
+        borderRadius: '24px',
+        padding: '14px 16px',
+        border: 'none',
+        flexShrink: 0,
+        maxWidth: '280px',
+        cursor: 'pointer',
+      }}
+    >
+      <IonIcon
+        icon={getIconForType()}
+        style={{ fontSize: '20px', color: colors.icon, flexShrink: 0 }}
+      />
+      <span
+        style={{
+          fontSize: '13px',
+          fontWeight: '600',
+          color: colors.text,
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+        }}
+      >
+        {title}
+      </span>
+      <IonIcon
+        icon={chevronForwardOutline}
+        style={{ fontSize: '16px', color: '#9ca3af', marginLeft: 'auto' }}
+      />
+    </button>
+  );
+};
+
+export default CareAlertPill;