38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
|
import { useState } from "react";
|
||
|
|
import { useInterface, useMutationFeedback } from "@quixos/camino-react";
|
||
|
|
import { LocalInput } from "@quixos/camino-react/ui";
|
||
|
|
import { interfaces, type Modules } from "./gen/client.js";
|
||
|
|
import "./editor.css";
|
||
|
|
const names = { name: interfaces.WebStudioCanvas.name };
|
||
|
|
export const Editor: Modules["Editor"] = ({ subject, input }) => {
|
||
|
|
const operations = useInterface(names, subject);
|
||
|
|
const [draft, setDraft] = useState("");
|
||
|
|
const feedback = useMutationFeedback();
|
||
|
|
return (
|
||
|
|
<section>
|
||
|
|
<h2>{input.body.root.name}</h2>
|
||
|
|
<label>
|
||
|
|
Name
|
||
|
|
<LocalInput value={draft} onChange={(e) => setDraft(e.target.value)} />
|
||
|
|
</label>
|
||
|
|
<button
|
||
|
|
disabled={operations.status !== "ready"}
|
||
|
|
onClick={() => {
|
||
|
|
if (operations.status === "ready") feedback.track(operations.value.name.set(draft));
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Save name
|
||
|
|
</button>
|
||
|
|
<p>{input.body.root.placements.entries.length} placements in this view</p>
|
||
|
|
<ul>
|
||
|
|
{input.body.root.placements.entries.map(({ node }, i) => (
|
||
|
|
<li key={i}>
|
||
|
|
{node.presentation} · {node.subject._camino.ref.object}
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
{feedback.message && <p role="alert">{feedback.message}</p>}
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
};
|