Tile

The Tile module provides interactive measurement display components designed for healthcare applications. It offers a complete solution for displaying measurement data, device status, and task progress with visual feedback and animations.

Overview

The Tile module is built using a compound component pattern, providing maximum flexibility for different measurement types and device states while maintaining visual consistency across your healthcare application.

Key Features

• Measurement Display: Show measurement values, units, and timestamps
• Device Status: Visual indicators for device connectivity and measurement progress
• Task Management: Progress tracking with completion states and animations
• Interactive States: Visual feedback for measuring, connected, and completed states
• Icon Support: Pre-built measurement type icons for various healthcare devices
• Animation Support: Smooth completion animations and loading spinners
• Theme Integration: Consistent styling with Material Design 3 theming
• Accessibility: Screen reader support and proper touch targets
• TypeScript: Full type safety throughout all components

Components

Main Container

• Tile - Main container component with state management

Content Components

• Tile.StartSection - Header section with task icon and completion state
• Tile.Title - Task title display component
• Tile.TaskIcon - Measurement type icons for various healthcare devices
• Tile.MeasuredValue - Display measurement values with units and time
• Tile.MeasuringSpinner - Loading indicator during measurements
• Tile.NoMeasuredValue - Placeholder for missing measurements
• Tile.Status - Device connection status indicator
• Tile.CompleteAnimation - Success animation for completed measurements

Common Patterns

Measurement Flow States

The Tile component supports several common measurement flow states:

1. Not Started: Shows task icon, title, and "No data" placeholder
2. Device Connected: Shows connection status when device is ready
3. Measuring: Shows spinner animation during active measurement
4. Completed: Shows measured value with timestamp
5. Success Animation: Optional celebration animation on completion

Measurement Types Support

The component supports various healthcare measurement types:

• Blood Pressure (MeasurementTypeKey.bloodPressure)
• Blood Glucose (MeasurementTypeKey.bloodGlucose)
• Body Weight (MeasurementTypeKey.bodyWeight)
• Temperature (MeasurementTypeKey.temperature)
• Heart Rate (MeasurementTypeKey.heartRate)
• ECG (MeasurementTypeKey.ecg)
• Blood Oxygen (MeasurementTypeKey.bloodOxygenPulseRate)
• Step Count (MeasurementTypeKey.stepCount)
• And many more...