maccha_time/src/panel/src/App.tsx

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

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

	async function query(event: CustomEventInit) {
		setTimezone(
			await invoke("run_plugin_function", {
				id: "time",
				name: "get_timezone_name",
				data: event.detail.substring(4).trim(),
			})
		);

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

	const timeUpdater = setInterval(async () => {
		setTime(
			await invoke("run_plugin_function", {
				id: "time",
				name: "get_time",
				data: timezone().replace(" ", "_"),
			})
		);
	}, 1e2);

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

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

		setTimezone(
			await invoke("run_plugin_function", {
				id: "time",
				name: "get_timezone_name",
				data: "",
			})
		);
	});

	onCleanup(() => {
		window.removeEventListener("maccha-query", query);
		clearInterval(timeUpdater);
	});

	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().replaceAll("_", " ")}`}
			</Show>
		</div>
	);
};

export default App;