starr-philproperties/lib/bs/src/modules/client/hooks/rescript/AnnotationPanel.js

// Generated by ReScript, PLEASE EDIT WITH CARE

import * as JsxRuntime from "react/jsx-runtime";

function AnnotationPanel(props) {
  let onClose = props.onClose;
  let onNoteChange = props.onNoteChange;
  let note = props.note;
  let lesson = props.lesson;
  let noteValue = note !== undefined ? note : "";
  return JsxRuntime.jsxs("div", {
    children: [
      JsxRuntime.jsxs("div", {
        children: [
          JsxRuntime.jsxs("div", {
            children: [
              JsxRuntime.jsx("p", {
                children: "Annotation",
                className: "text-xs text-muted-foreground uppercase tracking-widest font-semibold"
              }),
              JsxRuntime.jsx("h2", {
                children: lesson.title,
                className: "text-lg font-bold mt-0.5"
              })
            ]
          }),
          JsxRuntime.jsx("button", {
            children: "✕ Close",
            className: "text-muted-foreground hover:text-foreground transition-colors text-sm",
            onClick: param => onClose()
          })
        ],
        className: "flex items-center justify-between mb-4"
      }),
      JsxRuntime.jsx("textarea", {
        className: "flex-1 w-full resize-none rounded-lg border bg-background p-4 text-sm focus:outline-none focus:ring-2 focus:ring-ring",
        placeholder: "Write your notes for this lesson...",
        value: noteValue,
        onChange: e => {
          let value = e.target.value;
          onNoteChange(lesson.id, value);
        }
      }),
      JsxRuntime.jsx("p", {
        children: "Auto-saved to your browser",
        className: "text-xs text-muted-foreground mt-2"
      })
    ],
    className: "flex flex-col h-full"
  });
}

let make = AnnotationPanel;

export {
  make,
}
/* react/jsx-runtime Not a pure module */