Add File

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<MacroButtonsProps> = ({
+  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 (
+    <div className="grid grid-cols-2 gap-3 p-4 bg-gradient-to-t from-black/50 to-transparent backdrop-blur-md">
+      {buttons.map((button, index) => (
+        <button
+          key={index}
+          onClick={button.onClick}
+          aria-label={button.ariaLabel}
+          className={`
+            ${button.color}
+            text-white
+            flex flex-col items-center justify-center
+            gap-2
+            py-5 px-3
+            rounded-2xl
+            shadow-2xl
+            active:scale-95
+            transition-transform duration-150
+            min-h-[90px]
+            backdrop-blur-sm
+            bg-opacity-95
+          `}
+        >
+          <button.icon size={40} strokeWidth={2.5} />
+          <span className="text-base font-bold leading-tight text-center drop-shadow-md">
+            {button.label}
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+};