maccha_time/src/panel/src/App.tsx

import { invoke } from "@tauri-apps/api";
import {
  createSignal,
  type Component,
  onCleanup,
  onMount,
  Show,
} from "solid-js";

const App: Component = () => {
  let [timezone, setTimezone] = createSignal("");
  let [time, setTime] = createSignal("");

  async function submit(event: CustomEventInit) {
    setTimezone(event.detail.substring(4).trim());

    setTime(
      await invoke("run_plugin_function", {
        id: "time",
        name: "get_time",
        data: timezone().replace(" ", "_"),
      })
    );
  }

  onMount(async () => {
    window.addEventListener("maccha-submit", submit);

    setTime(
      await invoke("run_plugin_function", {
        id: "time",
        name: "get_local_time",
        data: "",
      })
    );

    setTimezone("your local time zone");
  });

  onCleanup(() => {
    window.removeEventListener("maccha-submit", submit);
  });

  return (
    <div class="maccha-time">
      <Show when={time() === "INVALID_TIME_ZONE"}>
        Invalid time zone specified!
      </Show>
      <Show when={time() !== "INVALID_TIME_ZONE"}>
        {`It's currently ${time()} in ${timezone()}`}
      </Show>
    </div>
  );
};

export default App;