feat: scaffold React frontend with Tailwind and Layonara theme

2026-04-20 18:37:07 -04:00
parent c7de3c13a7
commit 47d0ee60c0
7 changed files with 118 additions and 0 deletions
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Layonara Forge</title>
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,12 @@
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { Dashboard } from "./pages/Dashboard";
+
+export function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Dashboard />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./styles/globals.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
@@ -0,0 +1,14 @@
+export function Dashboard() {
+  return (
+    <div className="flex h-screen items-center justify-center">
+      <div className="text-center">
+        <h1 className="font-serif text-4xl font-bold text-forge-accent">
+          Layonara Forge
+        </h1>
+        <p className="mt-2 text-forge-text-secondary">
+          NWN Development Environment
+        </p>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,25 @@
+@import "tailwindcss";
+
+:root {
+  --forge-bg: #121212;
+  --forge-surface: #1e1e2e;
+  --forge-border: #2e2e3e;
+  --forge-accent: #946200;
+  --forge-text: #f2f2f2;
+  --forge-text-secondary: #888888;
+}
+
+:root.light {
+  --forge-bg: #f2f2f2;
+  --forge-surface: #ffffff;
+  --forge-border: #cbcbcb;
+  --forge-accent: #946200;
+  --forge-text: #252525;
+  --forge-text-secondary: #666666;
+}
+
+body {
+  background-color: var(--forge-bg);
+  color: var(--forge-text);
+  font-family: "Inter", system-ui, sans-serif;
+}
@@ -0,0 +1,26 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: ["./index.html", "./src/**/*.{ts,tsx}"],
+  darkMode: "class",
+  theme: {
+    extend: {
+      colors: {
+        forge: {
+          bg: "var(--forge-bg)",
+          surface: "var(--forge-surface)",
+          border: "var(--forge-border)",
+          accent: "var(--forge-accent)",
+          text: "var(--forge-text)",
+          "text-secondary": "var(--forge-text-secondary)",
+        },
+      },
+      fontFamily: {
+        sans: ["Inter", "system-ui", "sans-serif"],
+        mono: ["JetBrains Mono", "Fira Code", "monospace"],
+        serif: ["Baskerville", "Georgia", "Palatino", "serif"],
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;
@@ -0,0 +1,16 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy: {
+      "/api": "http://localhost:3000",
+      "/ws": {
+        target: "ws://localhost:3000",
+        ws: true,
+      },
+    },
+  },
+});