appcakes-bot/appcakes-builds
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
AppCakes
2026-07-04 10:50:55 +00:00
commit 4bb668be1a
149 changed files with 28016 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/RecipientCareCard.tsx
+239
View File
@@ -0,0 +1,239 @@
import React from 'react';
import { IonIcon } from '@ionic/react';
import {
cartOutline,
medkitOutline,
flashOutline,
timeOutline,
checkmarkCircleOutline,
ellipsisVertical,
} from 'ionicons/icons';
export interface CareStatus {
serviceType: 'grocery' | 'medication' | 'electricity' | 'airtime';
label: string;
statusText: string;
isOk: boolean;
}
export interface RecipientSummary {
id: string;
firstName: string;
lastName: string;
location: string;
avatarUrl: string | null;
statuses: CareStatus[];
}
interface RecipientCareCardProps {
recipient: RecipientSummary;
onSendSupport: (id: string) => void;
onMenuClick?: (id: string) => void;
}
const getIconForService = (type: string) => {
switch (type) {
case 'grocery':
return cartOutline;
case 'medication':
return medkitOutline;
case 'electricity':
return flashOutline;
default:
return cartOutline;
}
};
const getColorForService = (type: string) => {
switch (type) {
case 'grocery':
return '#6d28d9';
case 'medication':
return '#ef4444';
case 'electricity':
return '#f59e0b';
default:
return '#3b82f6';
}
};
const RecipientCareCard: React.FC<RecipientCareCardProps> = ({
recipient,
onSendSupport,
onMenuClick,
}) => {
return (
<div
style={{
backgroundColor: '#ffffff',
borderRadius: '24px',
padding: '16px',
width: '292px',
display: 'flex',
flexDirection: 'column',
gap: '14px',
flexShrink: 0,
}}
>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
}}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
<div
style={{
width: '48px',
height: '48px',
borderRadius: '16px',
backgroundColor: 'rgba(109,40,217,0.1)',
overflow: 'hidden',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
{recipient.avatarUrl ? (
<img
src={recipient.avatarUrl}
alt={recipient.firstName}
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
/>
) : (
<span
style={{
fontSize: '18px',
fontWeight: '700',
color: '#6d28d9',
}}
>
{recipient.firstName.charAt(0)}
</span>
)}
</div>
<div>
<div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
<h3
style={{
margin: 0,
fontSize: '16px',
fontWeight: '700',
color: '#111827',
}}
>
{recipient.firstName}
</h3>
<div
style={{
width: '8px',
height: '8px',
borderRadius: '50%',
backgroundColor: '#16a34a',
}}
/>
</div>
<p
style={{
margin: '2px 0 0',
fontSize: '13px',
fontWeight: '400',
color: '#6b7280',
}}
>
{recipient.location}
</p>
</div>
</div>
<button
onClick={() => onMenuClick && onMenuClick(recipient.id)}
style={{ background: 'transparent', border: 'none', padding: '4px' }}
>
<IonIcon
icon={ellipsisVertical}
style={{ fontSize: '20px', color: '#6b7280' }}
/>
</button>
</div>
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
{recipient.statuses.map((status, idx) => (
<div
key={idx}
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
backgroundColor: '#fafafa',
borderRadius: '12px',
padding: '12px',
}}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
<IonIcon
icon={getIconForService(status.serviceType)}
style={{
fontSize: '18px',
color: getColorForService(status.serviceType),
}}
/>
<div>
<div
style={{
fontSize: '13px',
fontWeight: '700',
color: '#111827',
}}
>
{status.label}
</div>
<div
style={{
fontSize: '12px',
fontWeight: '500',
color: status.isOk ? '#16a34a' : '#f59e0b',
marginTop: '2px',
}}
>
{status.statusText}
</div>
</div>
</div>
<IonIcon
icon={status.isOk ? checkmarkCircleOutline : timeOutline}
style={{
fontSize: '18px',
color: status.isOk ? '#16a34a' : '#f59e0b',
}}
/>
</div>
))}
</div>
<button
onClick={() => onSendSupport(recipient.id)}
style={{
width: '100%',
padding: '14px',
backgroundColor: '#6d28d9',
color: '#ffffff',
border: 'none',
borderRadius: '999px',
fontSize: '14px',
fontWeight: '700',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: '8px',
marginTop: 'auto',
}}
>
<IonIcon icon={cartOutline} style={{ fontSize: '18px' }} />
Send Again
</button>
</div>
);
};
export default RecipientCareCard;