@isthatuzii/create-nano-app/templates/solid-js/src/components/greeting/GreetingPanel.jsx

Desktop application scaffolding tool for the Nano Framework

import { createSignal, onMount } from "solid-js";
import "./GreetingPanel.css";
import { createGreetingPanelFunctions } from "./GreetingPanel.functions.js";
import api from "../../api/api.js";

function GreetingPanel(props) {
  const [state, setState] = createSignal({
    name: "World",
    greeting: null,
    loading: false,
    error: null
  });

  const functions = createGreetingPanelFunctions(
    state,
    setState,
    props,
    api
  );

  onMount(() => {
    functions.initialize();
  });

  return (
    <div class="nano-panel">
      <div class="nano-panel-header">Greeting</div>
      <div class="nano-panel-content">
        <label class="nano-label">Name</label>
        <input 
          type="text" 
          class="nano-input" 
          placeholder="Enter name"
          value={state().name}
          onInput={(e) => functions.setName(e.target.value)}
        />
        <button 
          class="nano-button" 
          onClick={functions.sendGreeting}
          disabled={state().loading}
        >
          {state().loading ? "Sending..." : "Send Greeting"}
        </button>
        
        {state().greeting && (
          <div class="greeting-output">
            {state().greeting.data}
          </div>
        )}

        {state().error && (
          <div class="greeting-error">
            Error: {state().error}
          </div>
        )}
      </div>
    </div>
  );
}

export default GreetingPanel;