init frontend

excalidraw/excalidraw-app/components/CreateCanvasDialog.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useCallback } from "react";
+import { Dialog } from "../../packages/excalidraw/components/Dialog";
+import { TextField } from "../../packages/excalidraw/components/TextField";
+import { FilledButton } from "../../packages/excalidraw/components/FilledButton";
+import { useSetAtom } from "jotai";
+import { createCanvasDialogAtom } from "../app-jotai";
+
+interface CreateCanvasDialogProps {
+  onCanvasCreate: (name: string) => void;
+}
+
+export const CreateCanvasDialog: React.FC<CreateCanvasDialogProps> = ({
+  onCanvasCreate,
+}) => {
+  const [name, setName] = useState("Untitled Canvas");
+  const setCreateCanvasDialog = useSetAtom(createCanvasDialogAtom);
+
+  const handleCreate = useCallback(() => {
+    if (name.trim()) {
+      onCanvasCreate(name.trim());
+      setCreateCanvasDialog({ isOpen: false });
+    }
+  }, [name, onCanvasCreate, setCreateCanvasDialog]);
+
+  const handleClose = useCallback(() => {
+    setCreateCanvasDialog({ isOpen: false });
+  }, [setCreateCanvasDialog]);
+
+  return (
+    <Dialog onCloseRequest={handleClose} title={"Create New Canvas"}>
+      <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+        <TextField
+          label="Canvas Name"
+          value={name}
+          placeholder="Enter a name for your new canvas"
+          onChange={setName}
+          onKeyDown={(e) => e.key === "Enter" && handleCreate()}
+        />
+        <div
+          style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}
+        >
+          <FilledButton
+            color="primary"
+            label={"Create"}
+            onClick={handleCreate}
+          />
+        </div>
+      </div>
+    </Dialog>
+  );
+};