useBatteryLevel

import { useBatteryLevel } from 'node-fullykiosk';

import { useBatteryLevel } from 'node-fullykiosk';

function BatteryMonitor() {
  const { batteryLevel } = useBatteryLevel();

  if (batteryLevel === undefined) {
    return <div>Fully Kiosk not available</div>;
  }

  return (
    <div>
      <h2>Battery Status</h2>
      <p>Current level: {batteryLevel}%</p>
      {batteryLevel < 20 && (
        <p style={{ color: 'red' }}>Low battery!</p>
      )}
    </div>
  );
}

import { useBatteryLevel } from 'node-fullykiosk';

function BatteryIndicator() {
  const { batteryLevel } = useBatteryLevel();

  if (batteryLevel === undefined) return null;

  const getBatteryColor = () => {
    if (batteryLevel > 50) return 'green';
    if (batteryLevel > 20) return 'orange';
    return 'red';
  };

  return (
    <div style={{ 
      display: 'flex', 
      alignItems: 'center',
      gap: '8px'
    }}>
      <div style={{
        width: '100px',
        height: '20px',
        border: '2px solid #333',
        borderRadius: '4px',
        overflow: 'hidden'
      }}>
        <div style={{
          width: `${batteryLevel}%`,
          height: '100%',
          backgroundColor: getBatteryColor(),
          transition: 'all 0.3s ease'
        }} />
      </div>
      <span>{batteryLevel}%</span>
    </div>
  );
}

import { useBatteryLevel } from 'node-fullykiosk';
import { useEffect } from 'react';

function LowBatteryAlert() {
  const { batteryLevel } = useBatteryLevel();

  useEffect(() => {
    if (batteryLevel !== undefined && batteryLevel < 15) {
      // Show critical battery warning
      console.warn('Critical battery level:', batteryLevel);
      // Trigger notification or action
    }
  }, [batteryLevel]);

  return (
    <div>
      {batteryLevel !== undefined && batteryLevel < 15 && (
        <div style={{
          padding: '16px',
          backgroundColor: '#ff4444',
          color: 'white',
          borderRadius: '8px'
        }}>
          ⚠️ Critical battery level: {batteryLevel}%
        </div>
      )}
    </div>
  );
}