dynamic graph

components/bed-pressure/BedPressureHeader.tsx

@@ -0,0 +1,29 @@
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Activity, Pause, Play } from "lucide-react"
+import { useBedPressureStore } from "@/stores/bedPressureStore"
+
+export function BedPressureHeader() {
+  const { isMonitoring, setIsMonitoring } = useBedPressureStore()
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2">
+          <Activity className="w-8 h-8 text-blue-600" />
+          <h1 className="text-3xl font-bold text-gray-900">Bed Pressure Monitor</h1>
+        </div>
+        <Badge variant={isMonitoring ? "default" : "secondary"} className="px-3 py-1">
+          {isMonitoring ? "Live" : "Paused"}
+        </Badge>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Button variant="outline" size="sm" onClick={() => setIsMonitoring(!isMonitoring)}>
+          {isMonitoring ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
+          {isMonitoring ? "Pause" : "Resume"}
+        </Button>
+      </div>
+    </div>
+  )
+}