From dc88bf169fddbc45b874baf9cdee60b42d8b7f57 Mon Sep 17 00:00:00 2001 From: PJ Date: Sat, 20 Jun 2026 12:21:22 -0400 Subject: [PATCH] feat(ui): build app shell with chapters, editor and preview dock --- index.html | 12 +++++++ src/App.tsx | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++++ src/main.tsx | 12 +++++++ 3 files changed, 122 insertions(+) create mode 100644 index.html create mode 100644 src/App.tsx create mode 100644 src/main.tsx diff --git a/index.html b/index.html new file mode 100644 index 0000000..439f0fb --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ + + + + + + margin + + +
+ + + diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..313d258 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,98 @@ +import { useState } from "react"; + +const CHAPTERS = [ + { n: "1", title: "The Lighthouse" }, + { n: "2", title: "Salt and Iron" }, + { n: "3", title: "What the Tide Left" }, + { n: "4", title: "Homecoming" }, +]; + +const BODY = [ + "The lamp had not been lit in thirty years, and yet the islanders still set their clocks by a light that no longer came. Mara climbed the iron stair each evening out of a habit older than memory, and each evening she found the same dark glass waiting, patient as the sea.", + "Her grandfather had kept the flame. Her mother had let it die. Between those two facts lay the whole of the family's quarrel with the water, and Mara had inherited both the quarrel and the key that opened the lantern room.", + "She did not light it that night either. She only stood at the gallery rail and counted the boats coming in, the way she had been taught to count them, as though arithmetic alone could keep them safe until morning.", +]; + +function Icon({ d }: { d: string }) { + return ( + + + + ); +} + +function App() { + const [active, setActive] = useState("1"); + const [dock, setDock] = useState(true); + const current = CHAPTERS.find((c) => c.n === active)!; + + return ( +
+
+ Untitled — a novel +
+ +
+
+ +
+ + +
+
+
+
Chapter {current.n}
+

{current.title}

+
+ {BODY.map((t, i) => ( +

{t}

+ ))} +
⁂
+

Morning came the color of pewter. The tide had left its usual accounting along the shingle — a torn net, a single boot, the pale architecture of a gull — and Mara walked the length of it without hurry, naming each thing as her grandfather had named them to her.

+
+
+ + {dock && ( +
+
+ Preview + 6 × 9 in · 1 of 1 +
+
+
+
Chapter {current.n}
+
{current.title}
+
+ {BODY.map((t, i) => ( +

{t}

+ ))} +
7
+
+
+ )} +
+
+ ); +} + +export default App; diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..af96e77 --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; +import "./styles/fonts.css"; +import "./styles/tokens.css"; +import "./styles/app.css"; + +ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( + + + +);