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,
      },
    },
  },
 });