gram: relay

> ./src/App.tsx

Lenses
(coming soon!)

import { useState } from "preact/hooks";
import { invoke } from "@tauri-apps/api/core";

import Vite from "./assets/vite.svg";
import Tauri from "./assets/tauri.svg";
import Preact from "./assets/preact.svg";

import "./App.css";

function App() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");

  async function greet() {
    // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <main class="container">
      <h1>Welcome to Tauri + Preact</h1>

      <div class="row">
        <a href="https://vite.dev" target="_blank">
          <Vite className="logo vite" />
        </a>
        <a href="https://tauri.app" target="_blank">
          <Tauri className="logo tauri" />
        </a>
        <a href="https://preactjs.com" target="_blank">
          <Preact className="logo preact" />
        </a>
      </div>
      <p>Click on the Tauri, Vite, and Preact logos to learn more.</p>

      <form
        class="row"
        onSubmit={(e) => {
          e.preventDefault();
          greet();
        }}
      >
        <input
          id="greet-input"
          onInput={(e) => setName(e.currentTarget.value)}
          placeholder="Enter a name..."
        />
        <button type="submit">Greet</button>
      </form>
      <p>{greetMsg}</p>
    </main>
  );
}

export default App;