feat: implement Editor page with Fabric.js-based ComposeCanvas

2026-05-04 19:10:52 +00:00 · 2026-04-11 13:46:44 +05:30
parent 545b802a8b
commit 54d2021e81
2 changed files with 182 additions and 0 deletions
@@ -0,0 +1,41 @@
+import { useState } from "react";
+import ComposeCanvas from "../components/ui/ComposeCanvas";
+import DateDisplay from "../components/ui/DateDisplay";
+
+export default function Editor() {
+  const [recipient, setRecipient] = useState("");
+
+  return (
+    <section className="flex-1 overflow-y-auto scrollbar-hide px-2 py-12 bg-base-300">
+      <div className="max-w-[720px] mx-auto px-1 md:px-0">
+        <div className="flex justify-between items-end mb-16 border-b border-base-content/5 pb-8 px-0">
+          <div className="flex flex-col gap-2 flex-1">
+            <label
+              htmlFor="recipient"
+              className="text-[10px] uppercase tracking-[0.4em] text-secondary-content font-bold"
+            >
+              Recipient
+            </label>
+            <input
+              id="recipient"
+              type="text"
+              placeholder="Someone dear..."
+              value={recipient}
+              onChange={(e) => setRecipient(e.target.value)}
+              className="bg-transparent border-none outline-none text-4xl font-serif text-base-content placeholder:text-base-content/10 w-full"
+            />
+          </div>
+          <DateDisplay />
+        </div>
+
+        <div
+          id="writer-toolbar"
+          className="flex items-center justify-center mb-4 min-h-12 bg-white/5 rounded-sm border border-white/5 font-display text-sm tracking-widest text-secondary-content"
+        >
+          Toolbar Placeholder
+        </div>
+        <ComposeCanvas />
+      </div>
+    </section>
+  );
+}