File size: 2,817 Bytes
6fc6fbd 81fc505 6fc6fbd 81fc505 6fc6fbd 81fc505 6fc6fbd 81fc505 dd690a1 81fc505 26e99ce 81fc505 26e99ce 81fc505 26e99ce 81fc505 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | import { useEffect, useRef, useState } from "react";
const initialState = {
question: "",
answer: ""
};
export function EntryForm({ onSubmit, onCancel, initialValue, saving }) {
const [form, setForm] = useState(initialState);
const formRef = useRef(null);
useEffect(() => {
setForm(initialValue || initialState);
if (formRef.current) {
formRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
formRef.current.querySelector("input")?.focus();
}
}, [initialValue]);
return (
<form
className="editor-panel"
ref={formRef}
onSubmit={(event) => {
event.preventDefault();
onSubmit(form);
}}
style={{ display: "flex", flexDirection: "column", gap: "32px" }}
>
<div className="field-group">
<label className="field-label" htmlFor="question" style={{ display: "block", marginBottom: "12px", fontSize: "11px", textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--text-muted)" }}>
Question
</label>
<textarea
id="question"
rows="2"
style={{ minHeight: "80px", width: "100%", padding: "16px", borderRadius: "var(--radius-md)", border: "1px solid var(--border-subtle)", background: "var(--bg-input)", color: "var(--text-primary)", fontSize: "16px" }}
value={form.question}
onChange={(event) => setForm((current) => ({ ...current, question: event.target.value }))}
placeholder="What do you want to remember?"
/>
</div>
<div className="field-group">
<label className="field-label" htmlFor="answer" style={{ display: "block", marginBottom: "12px", fontSize: "11px", textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--text-muted)" }}>
Answer (Markdown)
</label>
<textarea
id="answer"
rows="12"
style={{ minHeight: "300px", width: "100%", padding: "16px", borderRadius: "var(--radius-md)", border: "1px solid var(--border-subtle)", background: "var(--bg-input)", color: "var(--text-primary)", fontSize: "16px", fontFamily: "inherit" }}
value={form.answer}
onChange={(event) => setForm((current) => ({ ...current, answer: event.target.value }))}
placeholder="Markdown renders as formatted answer output."
/>
</div>
<div className="form-actions" style={{ display: "flex", gap: "12px", paddingTop: "16px" }}>
<button className="button-primary" disabled={saving} style={{ flex: 1, padding: "16px" }} type="submit">
{saving ? "Saving..." : "Save to Library"}
</button>
<button className="button-ghost" onClick={onCancel} style={{ padding: "16px 24px" }} type="button">
Cancel
</button>
</div>
</form>
);
}
|