AppCakes
89 lines
1.9 KiB
TypeScript
89 lines
1.9 KiB
TypeScript
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;
|