diff --git a/src/elderly/components/MacroButtons.tsx b/src/elderly/components/MacroButtons.tsx new file mode 100644 index 0000000..20206b5 --- /dev/null +++ b/src/elderly/components/MacroButtons.tsx @@ -0,0 +1,83 @@ +import React from 'react'; +import { Mic, Users, Heart, Image } from 'lucide-react'; + +interface MacroButtonsProps { + onMicClick?: () => void; + onFamilyClick?: () => void; + onEmergencyClick?: () => void; + onPhotosClick?: () => void; +} + +/** + * 四宫格大按钮组件 + * 9:16 竖屏优化 - 2x2 网格布局 + * 满足无障碍触达要求 (≥ 48dp) + */ +export const MacroButtons: React.FC = ({ + onMicClick, + onFamilyClick, + onEmergencyClick, + onPhotosClick, +}) => { + const buttons = [ + { + icon: Mic, + label: '说话', + onClick: onMicClick, + color: 'bg-blue-500 hover:bg-blue-600', + ariaLabel: '点击开始说话', + }, + { + icon: Users, + label: '家人', + onClick: onFamilyClick, + color: 'bg-green-500 hover:bg-green-600', + ariaLabel: '联系家人', + }, + { + icon: Heart, + label: '我不舒服', + onClick: onEmergencyClick, + color: 'bg-red-500 hover:bg-red-600', + ariaLabel: '我不舒服,需要帮助', + }, + { + icon: Image, + label: '看看照片', + onClick: onPhotosClick, + color: 'bg-purple-500 hover:bg-purple-600', + ariaLabel: '查看照片和视频', + }, + ]; + + return ( +
+ {buttons.map((button, index) => ( + + ))} +
+ ); +};