onairos/src/mobile/components/MobileBox.jsx

The Onairos Library is a collection of functions that enable Applications to connect and communicate data with Onairos Identities via User Authorization. Integration for developers is seamless, simple and effective for all applications. LLM SDK capabiliti

import React, { useState, useEffect } from 'react';

/**
 * MobileBox Component
 * Mobile-optimized checkbox component for data request selections
 */
export default function MobileBox({ 
  active, 
  onSelectionChange, 
  changeGranted, 
  number,
  title,
  type 
}) {
  const [isChecked, setIsChecked] = useState(false);

  const handleCheckboxChange = (e) => {
    // Get the checked state
    const newCheckedState = e.target.checked;
    setIsChecked(newCheckedState);
    
    // Update the counter
    if (newCheckedState) {
      changeGranted(1);
    } else {
      changeGranted(-1);
    }
    
    // Report the selection change to parent
    onSelectionChange(newCheckedState);
  };

  // Reset checkbox when overlay closes or becomes inactive
  useEffect(() => {
    if (!active) {
      setIsChecked(false);
    }
  }, [active]);

  return (
    <div className="mobile-box-container">
      <div
        className={`mobile-checkbox-wrapper ${!active ? 'inactive' : 'active'}`}
      >
        <input
          id={`mobile-checkbox-${number}`}
          type="checkbox"
          value=""
          checked={isChecked}
          onChange={handleCheckboxChange}
          disabled={!active}
          className={`mobile-checkbox ${isChecked && active ? 'checked' : ''}`}
        />
        <label
          htmlFor={`mobile-checkbox-${number}`}
          className={`mobile-checkbox-label ${active ? 'active' : 'inactive'}`}
        >
          <span className="mobile-checkbox-title">
            {title || `Request ${number}`}
          </span>
        </label>
      </div>
      
      {!active && (
        <div className="mobile-inactive-message">
          Please create your Personality model to access this Grant Request
        </div>
      )}
    </div>
  );
}