itsamejms
f30a92ddeb
- Tauri v2 project with greet command (invoke round-trip verified) - React + TypeScript + Vite front-end - Tailwind CSS v4 with dark blue + gold design tokens - Glassmorphism .glass-card component with backdrop-filter - BentoCard component (framer-motion, lucide-react icons) - App shell: left rail nav (56px) + title bar + bento grid dashboard - Cinzel / Inter / JetBrains Mono font stack - Dark-only design: #0a0e1a deep, #d4af37 gold accents - All design tokens as CSS custom properties - Rust backend: greet command, tauri-plugin-log - Builds successfully: cargo check, tsc, vite build, tauri build (macOS .app + .dmg)
42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import { useState } from "react";
|
|
import { invoke } from "@tauri-apps/api/core";
|
|
|
|
export function Greet() {
|
|
const [greeting, setGreeting] = useState("");
|
|
const [name, setName] = useState("");
|
|
|
|
async function greet() {
|
|
// Learn more about Tauri commands at https://v2.tauri.app/develop/calling-rust/
|
|
setGreeting(await invoke("greet", { name }));
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center h-full gap-3">
|
|
<form
|
|
className="flex gap-2 w-full max-w-md"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
greet();
|
|
}}
|
|
>
|
|
<input
|
|
className="flex-1 rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] px-3 py-2 text-[var(--color-text-primary)] placeholder-[var(--color-text-dim)] focus:outline-none focus:border-[var(--color-gold-bright)] text-sm font-[var(--font-sans)]"
|
|
onChange={(e) => setName(e.target.value)}
|
|
placeholder="Enter a name…"
|
|
value={name}
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="rounded-lg bg-[var(--color-gold-bright)] text-[var(--color-bg-deep)] px-4 py-2 text-sm font-semibold hover:bg-[var(--color-gold-muted)] transition-colors cursor-pointer"
|
|
>
|
|
Greet
|
|
</button>
|
|
</form>
|
|
{greeting && (
|
|
<p className="text-[var(--color-text-secondary)] text-sm font-[var(--font-mono)]">
|
|
{greeting}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
} |