v0.1.0-skeleton: Tauri v2 + React + TS scaffold with design system
- 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)
This commit is contained in:
itsamejms
@@ -0,0 +1,37 @@
|
||||
import { motion } from "framer-motion";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
interface BentoCardProps {
|
||||
title: string;
|
||||
icon: ReactNode;
|
||||
span?: string;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function BentoCard({
|
||||
title,
|
||||
icon,
|
||||
span = "col-span-1 row-span-1",
|
||||
children,
|
||||
className = "",
|
||||
}: BentoCardProps) {
|
||||
return (
|
||||
<motion.div
|
||||
className={`glass-card flex flex-col overflow-hidden p-4 ${span} ${className}`}
|
||||
whileHover={{ scale: 1.005 }}
|
||||
whileTap={{ scale: 0.985 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 25 }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-2 pb-2 mb-3 border-b border-[var(--color-border-glass)]">
|
||||
<span className="text-[var(--color-gold-bright)]">{icon}</span>
|
||||
<h2 className="font-heading text-sm font-semibold tracking-wide text-[var(--color-text-primary)]">
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-y-auto">{children}</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
import {
|
||||
Map,
|
||||
User,
|
||||
Swords,
|
||||
ScrollText,
|
||||
Dice5,
|
||||
Timer,
|
||||
GitBranch,
|
||||
Volume2,
|
||||
Calendar,
|
||||
Sparkles,
|
||||
} from "lucide-react";
|
||||
import { BentoCard } from "./BentoCard";
|
||||
import { Greet } from "./Greet";
|
||||
|
||||
export function Dashboard() {
|
||||
return (
|
||||
<div className="grid grid-cols-4 grid-rows-4 gap-3 p-4 h-full bg-[var(--color-bg-deep)]">
|
||||
{/* World Map — 2×2 */}
|
||||
<BentoCard title="World Map" icon={<Map size={16} />} span="col-span-2 row-span-2">
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
|
||||
Map canvas placeholder
|
||||
</div>
|
||||
</BentoCard>
|
||||
|
||||
{/* NPC Sheet — 1×1 */}
|
||||
<BentoCard title="NPC Sheet" icon={<User size={16} />} span="col-span-1 row-span-1">
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
|
||||
NPC generator placeholder
|
||||
</div>
|
||||
</BentoCard>
|
||||
|
||||
{/* Dice Roller — 1×1 */}
|
||||
<BentoCard title="Dice Roller" icon={<Dice5 size={16} />} span="col-span-1 row-span-1">
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
|
||||
Dice roller placeholder
|
||||
</div>
|
||||
</BentoCard>
|
||||
|
||||
{/* Encounter Builder — 1×1 */}
|
||||
<BentoCard
|
||||
title="Encounter"
|
||||
icon={<Swords size={16} />}
|
||||
span="col-span-1 row-span-1"
|
||||
>
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
|
||||
Encounter builder placeholder
|
||||
</div>
|
||||
</BentoCard>
|
||||
|
||||
{/* Session Log — 2×1 */}
|
||||
<BentoCard
|
||||
title="Session Log"
|
||||
icon={<ScrollText size={16} />}
|
||||
span="col-span-2 row-span-1"
|
||||
>
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
|
||||
Session log placeholder
|
||||
</div>
|
||||
</BentoCard>
|
||||
|
||||
{/* Quest Designer — 2×1 */}
|
||||
<BentoCard
|
||||
title="Quest Designer"
|
||||
icon={<GitBranch size={16} />}
|
||||
span="col-span-2 row-span-1"
|
||||
>
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
|
||||
Quest designer placeholder
|
||||
</div>
|
||||
</BentoCard>
|
||||
|
||||
{/* Initiative Tracker — 1×1 */}
|
||||
<BentoCard title="Initiative" icon={<Timer size={16} />} span="col-span-1 row-span-1">
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
|
||||
Initiative tracker placeholder
|
||||
</div>
|
||||
</BentoCard>
|
||||
|
||||
{/* Random Tables — 1×1 */}
|
||||
<BentoCard
|
||||
title="Random Tables"
|
||||
icon={<Sparkles size={16} />}
|
||||
span="col-span-1 row-span-1"
|
||||
>
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
|
||||
Random tables placeholder
|
||||
</div>
|
||||
</BentoCard>
|
||||
|
||||
{/* Greeting / LLM Test — spans bottom area */}
|
||||
<BentoCard
|
||||
title="DM-Pal"
|
||||
icon={<Volume2 size={16} />}
|
||||
span="col-span-2 row-span-1"
|
||||
>
|
||||
<Greet />
|
||||
</BentoCard>
|
||||
|
||||
{/* Calendar — 1×1 */}
|
||||
<BentoCard
|
||||
title="Calendar"
|
||||
icon={<Calendar size={16} />}
|
||||
span="col-span-1 row-span-1"
|
||||
>
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
|
||||
Calendar placeholder
|
||||
</div>
|
||||
</BentoCard>
|
||||
|
||||
{/* Soundboard — 1×1 */}
|
||||
<BentoCard
|
||||
title="Soundboard"
|
||||
icon={<Volume2 size={16} />}
|
||||
span="col-span-1 row-span-1"
|
||||
>
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
|
||||
Soundboard placeholder
|
||||
</div>
|
||||
</BentoCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user