Daniel Volz
8718311876
- Extract App.tsx from 764 lines to ~404 lines - Create reusable components: MedDetailModal, MobileEditModal, ShareDialog, etc. - Add AppContext for global state management - Split pages: DashboardPage, MedicationsPage, SchedulePage, SettingsPage, PlannerPage - Create custom hooks: useAuth, useMedications, useSettings, useDoses, useSchedule - Add utility functions in separate modules - Fix stock status logic (>30 days = green/normal) - Fix reminder threshold calculation (use reminderDaysBefore not lowStockDays) - Fix takenBy validation (send [] instead of null) - Fix datetime format for blister start times (add Z suffix) - Style 'All OK' status as green/bold BREAKING: None - all existing functionality preserved
20 lines
725 B
TypeScript
20 lines
725 B
TypeScript
// =============================================================================
|
|
// MedicationAvatar Component
|
|
// =============================================================================
|
|
|
|
export type MedicationAvatarProps = {
|
|
name: string;
|
|
imageUrl?: string | null;
|
|
size?: "sm" | "md" | "lg";
|
|
};
|
|
|
|
export function MedicationAvatar({ name, imageUrl, size = "sm" }: MedicationAvatarProps) {
|
|
const initials = name.split(" ").map(w => w[0]).join("").toUpperCase().slice(0, 2) || "?";
|
|
const sizeClass = `med-avatar med-avatar-${size}`;
|
|
|
|
if (imageUrl) {
|
|
return <img src={`/api/images/${imageUrl}`} alt={name} className={sizeClass} />;
|
|
}
|
|
return <div className={`${sizeClass} med-avatar-initials`}>{initials}</div>;
|
|
}
|